ਰੇਂਜ
ਇਕਸਾਰ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਸਟਾਈਲਿੰਗ ਅਤੇ ਬਿਲਟ-ਇਨ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਸਾਡੇ ਕਸਟਮ ਰੇਂਜ ਇਨਪੁਟਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਸੰਖੇਪ ਜਾਣਕਾਰੀ
ਨਾਲ ਕਸਟਮ <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;