পরিসর
ধারাবাহিক ক্রস-ব্রাউজার স্টাইলিং এবং অন্তর্নির্মিত কাস্টমাইজেশনের জন্য আমাদের কাস্টম পরিসর ইনপুটগুলি ব্যবহার করুন৷
ওভারভিউ
এর সাথে কাস্টম <input type="range">নিয়ন্ত্রণ তৈরি করুন .form-range। ট্র্যাক (ব্যাকগ্রাউন্ড) এবং থাম্ব (মান) উভয়ই ব্রাউজার জুড়ে একই দেখাতে স্টাইল করা হয়েছে। যেহেতু শুধুমাত্র Firefox চাক্ষুষভাবে অগ্রগতি নির্দেশ করার উপায় হিসাবে থাম্বের বাম বা ডান দিক থেকে তাদের ট্র্যাক "ভর্তি" সমর্থন করে, আমরা বর্তমানে এটি সমর্থন করি না।
<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;