పరిధి
స్థిరమైన క్రాస్ బ్రౌజర్ స్టైలింగ్ మరియు అంతర్నిర్మిత అనుకూలీకరణ కోసం మా అనుకూల శ్రేణి ఇన్‌పుట్‌లను ఉపయోగించండి.
అవలోకనం
తో అనుకూల <input type="range">నియంత్రణలను సృష్టించండి .form-range. ట్రాక్ (నేపథ్యం) మరియు బొటనవేలు (విలువ) రెండూ బ్రౌజర్‌లలో ఒకే విధంగా కనిపించేలా రూపొందించబడ్డాయి. దృశ్యపరంగా పురోగతిని సూచించడానికి ఫైర్‌ఫాక్స్ మాత్రమే వారి ట్రాక్‌ని ఎడమ లేదా కుడి బొటనవేలు నుండి "పూరించడానికి" మద్దతు ఇస్తుంది కాబట్టి, మేము ప్రస్తుతం దీనికి మద్దతు ఇవ్వము.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">వికలాంగుడు
disabledఇన్‌పుట్‌కు బూడిద రంగులో కనిపించేలా చేయడానికి, పాయింటర్ ఈవెంట్‌లను తీసివేయడానికి మరియు ఫోకస్ చేయకుండా నిరోధించడానికి బూలియన్ లక్షణాన్ని జోడించండి .
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>కనిష్ట మరియు గరిష్టం
శ్రేణి ఇన్‌పుట్‌లు వరుసగా minమరియు max- 0మరియు కోసం అవ్యక్త విలువలను కలిగి 100ఉంటాయి. minమీరు మరియు maxలక్షణాలను ఉపయోగించే వారి కోసం మీరు కొత్త విలువలను పేర్కొనవచ్చు .
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">దశలు
డిఫాల్ట్‌గా, పరిధి ఇన్‌పుట్‌లు పూర్ణాంక విలువలకు “స్నాప్” చేస్తాయి. దీన్ని మార్చడానికి, మీరు stepవిలువను పేర్కొనవచ్చు. దిగువ ఉదాహరణలో, మేము ఉపయోగించి దశల సంఖ్యను రెట్టింపు చేస్తాము step="0.5".
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">సాస్
వేరియబుల్స్
$form-range-track-width: 100%;
$form-range-track-height: .5rem;
$form-range-track-cursor: pointer;
$form-range-track-bg: $gray-300;
$form-range-track-border-radius: 1rem;
$form-range-track-box-shadow: $box-shadow-inset;
$form-range-thumb-width: 1rem;
$form-range-thumb-height: $form-range-thumb-width;
$form-range-thumb-bg: $component-active-bg;
$form-range-thumb-border: 0;
$form-range-thumb-border-radius: 1rem;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1);
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow;
$form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
$form-range-thumb-disabled-bg: $gray-500;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;