ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
Check
in English

ପରିସର

କ୍ରମାଗତ କ୍ରସ୍ ବ୍ରାଉଜର୍ ଷ୍ଟାଇଲିଂ ଏବଂ ବିଲ୍ଟ-ଇନ୍ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ଆମର କଷ୍ଟମ୍ ରେଞ୍ଜ୍ ଇନପୁଟ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଏହି ପୃଷ୍ଠାରେ |

ସମୀକ୍ଷା

ସହିତ କଷ୍ଟମ୍ <input type="range">କଣ୍ଟ୍ରୋଲ୍ ସୃଷ୍ଟି କରନ୍ତୁ .form-range| ଟ୍ରାକ (ପୃଷ୍ଠଭୂମି) ଏବଂ ଆଙ୍ଗୁଠି (ମୂଲ୍ୟ) ଉଭୟ ବ୍ରାଉଜରରେ ସମାନ ଦେଖାଯିବା ପାଇଁ ଷ୍ଟାଇଲ୍ ହୋଇଛି | ଯେହେତୁ କେବଳ ଫାୟାରଫକ୍ସ ଆଙ୍ଗୁଠିର ବାମ କିମ୍ବା ଡାହାଣରୁ ସେମାନଙ୍କ ଟ୍ରାକକୁ “ଭରିବା” କୁ ସମର୍ଥନ କରେ, ଭିଜୁଆଲ୍ ଭାବରେ ପ୍ରଗତିକୁ ସୂଚାଇବା ପାଇଁ ଏକ ମାଧ୍ୟମ ଭାବରେ, ଆମେ ବର୍ତ୍ତମାନ ଏହାକୁ ସମର୍ଥନ କରୁନାହୁଁ |

html 
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

ଅକ୍ଷମ

disabledଏହାକୁ ଏକ ଧୂସର ରଙ୍ଗର ରୂପ ଦେବା, ସୂଚକ ଇଭେଣ୍ଟଗୁଡିକ ଅପସାରଣ କରିବା ଏବଂ ଧ୍ୟାନକୁ ରୋକିବା ପାଇଁ ଏକ ଇନପୁଟ୍ ଉପରେ ବୁଲିଅନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ |

html 
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

ସର୍ବନିମ୍ନ ଏବଂ ସର୍ବାଧିକ

ରେଞ୍ଜ୍ ଇନପୁଟ୍ ଗୁଡିକ ଯଥାକ୍ରମେ minଏବଂ max- 0ଏବଂ ପାଇଁ ଅନ୍ତର୍ନିହିତ ମୂଲ୍ୟ ଧାରଣ କରେ 100| minଯେଉଁମାନେ ଏବଂ maxଗୁଣବତ୍ତା ବ୍ୟବହାର କରୁଛନ୍ତି ସେମାନଙ୍କ ପାଇଁ ଆପଣ ନୂତନ ମୂଲ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରିପାରିବେ |

html 
<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"|

html 
<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;