ପରିସର
କ୍ରମାଗତ କ୍ରସ୍ ବ୍ରାଉଜର୍ ଷ୍ଟାଇଲିଂ ଏବଂ ବିଲ୍ଟ-ଇନ୍ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ଆମର କଷ୍ଟମ୍ ରେଞ୍ଜ୍ ଇନପୁଟ୍ ବ୍ୟବହାର କରନ୍ତୁ |
ସମୀକ୍ଷା
ସହିତ କଷ୍ଟମ୍ <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;