|$ curl https://forge-ai.dev/api/markdown?path=docs/components/sliders
$cat docs/sliders-&-range-inputs.md
updated Recently·22 min read·published
Sliders & Range Inputs
Introduction
Range inputs select values within a continuum — from simple volume sliders to multi-handle price range pickers. This guide covers production-ready slider patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap, including custom styling, step increments, tooltips, and accessibility.
ℹ
info
Native <input type="range"> provides built-in keyboard support and screen-reader semantics. Pair it with a visible value display and update ARIA live regions for the best experience.
Basic Range Slider
A minimal range input with a live value readout. The native <input type="range"> element provides built-in drag interaction, keyboard support, and screen reader accessibility out of the box.
basic-slider
Live
untitled.html
HTML
| 1 | <div class="slider-demo"> |
| 2 | <div class="slider-group"> |
| 3 | <label class="slider-label"> |
| 4 | Volume |
| 5 | <span class="slider-value" id="vol-val"> |
| 6 | 50 |
| 7 | </span> |
| 8 | </label> |
| 9 | <input type="range" class="slider" id="vol-slider" min="0" max="100" value="50"/> |
| 10 | </div> |
| 11 | </div> |
untitled.css
CSS
| 1 | .slider-demo { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:20px; |
| 5 | padding:32px; |
| 6 | align-items:center; |
| 7 | font-family:system-ui, |
| 8 | sans-serif |
| 9 | } |
| 10 | .slider-group { |
| 11 | width:100%; |
| 12 | max-width:320px |
| 13 | } |
| 14 | .slider-label { |
| 15 | display:flex; |
| 16 | align-items:center; |
| 17 | justify-content:space-between; |
| 18 | font-size:12px; |
| 19 | font-weight:600; |
| 20 | color:#E0E0E0; |
| 21 | margin-bottom:8px |
| 22 | } |
| 23 | .slider-value { |
| 24 | font-size:12px; |
| 25 | color:#00FF41; |
| 26 | font-variant-numeric:tabular-nums; |
| 27 | min-width:28px; |
| 28 | text-align:right |
| 29 | } |
| 30 | .slider { |
| 31 | width:100%; |
| 32 | height:6px; |
| 33 | border-radius:3px; |
| 34 | appearance:none; |
| 35 | background:#2A2A3E; |
| 36 | outline:none; |
| 37 | cursor:pointer |
| 38 | } |
| 39 | .slider::-webkit-slider-thumb { |
| 40 | appearance:none; |
| 41 | width:18px; |
| 42 | height:18px; |
| 43 | border-radius:50%; |
| 44 | background:#00FF41; |
| 45 | cursor:pointer; |
| 46 | border:2px solid #0A0A0A; |
| 47 | box-shadow:0 0 8px rgba(0, |
| 48 | 255, |
| 49 | 65, |
| 50 | .3) |
| 51 | } |
| 52 | .slider::-moz-range-thumb { |
| 53 | width:18px; |
| 54 | height:18px; |
| 55 | border-radius:50%; |
| 56 | background:#00FF41; |
| 57 | cursor:pointer; |
| 58 | border:2px solid #0A0A0A |
| 59 | } |
| 60 | .slider:hover::-webkit-slider-thumb { |
| 61 | box-shadow:0 0 16px rgba(0, |
| 62 | 255, |
| 63 | 65, |
| 64 | .5); |
| 65 | transform:scale(1.1) |
| 66 | } |
untitled.js
JavaScript
| 1 | const slider=document.getElementById('vol-slider');const val=document.getElementById('vol-val');slider.addEventListener('input',()=>val.textContent=slider.value) |
untitled.html
HTML
| 1 | <div class="w-full max-w-xs mx-auto p-8 bg-[#0A0A0A]"> |
| 2 | <div class="mb-2 flex items-center justify-between"> |
| 3 | <label for="tw-vol" class="text-xs font-semibold text-[#E0E0E0]"> |
| 4 | Volume |
| 5 | </label> |
| 6 | <span id="tw-vol-val" class="text-xs font-semibold text-[#00FF41] tabular-nums min-w-[28px] text-right"> |
| 7 | 50 |
| 8 | </span> |
| 9 | </div> |
| 10 | <input id="tw-vol" type="range" min="0" max="100" value="50" class="w-full h-1.5 bg-[#2A2A3E] rounded-lg appearance-none cursor-pointer accent-[#00FF41]"> |
| 11 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .bs-range::-webkit-slider-thumb{background:#00FF41;border:2px solid #0A0A0A;box-shadow:0 0 8px rgba(0,255,65,.3);width:18px;height:18px;border-radius:50%} |
| 3 | .bs-range::-moz-range-thumb{background:#00FF41;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 4 | .bs-range::-webkit-slider-runnable-track{background:#2A2A3E;height:6px;border-radius:3px} |
| 5 | .bs-range::-moz-range-track{background:#2A2A3E;height:6px;border-radius:3px} |
| 6 | </style> |
| 7 | <div class="w-100" style="max-width:320px"> |
| 8 | <div class="d-flex justify-content-between align-items-center mb-2"> |
| 9 | <label for="bs-vol" class="form-label mb-0 small fw-semibold" style="color:#E0E0E0"> |
| 10 | Volume |
| 11 | </label> |
| 12 | <span id="bs-vol-val" class="small fw-semibold" style="color:#00FF41"> |
| 13 | 50 |
| 14 | </span> |
| 15 | </div> |
| 16 | <input id="bs-vol" type="range" class="form-range bs-range" min="0" max="100" value="50"> |
| 17 | </div> |
Custom Styled
Custom thumb and track styling with a gradient-filled track that reflects the current value. Inline SVG icons add context without importing a library.
custom-styled
Live
untitled.html
HTML
| 1 | <div class="styled-demo"> |
| 2 | <div class="field"> |
| 3 | <label> |
| 4 | Brightness |
| 5 | </label> |
| 6 | <div class="track-wrap"> |
| 7 | <input type="range" class="styled-slider" id="bright" min="0" max="100" value="65"/> |
| 8 | <div class="track-fill" id="bright-fill" style="width:65%"> |
| 9 | </div> |
| 10 | </div> |
| 11 | <div class="field-info"> |
| 12 | <span class="fi-icon"> |
| 13 | ☀ |
| 14 | </span> |
| 15 | <span class="fi-val" id="bright-val"> |
| 16 | 65% |
| 17 | </span> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="field"> |
| 21 | <label> |
| 22 | Contrast |
| 23 | </label> |
| 24 | <div class="track-wrap"> |
| 25 | <input type="range" class="styled-slider" id="contrast" min="0" max="100" value="40"/> |
| 26 | <div class="track-fill" id="contrast-fill" style="width:40%"> |
| 27 | </div> |
| 28 | </div> |
| 29 | <div class="field-info"> |
| 30 | <span class="fi-icon"> |
| 31 | ◐ |
| 32 | </span> |
| 33 | <span class="fi-val" id="contrast-val"> |
| 34 | 40% |
| 35 | </span> |
| 36 | </div> |
| 37 | </div> |
| 38 | <div class="field"> |
| 39 | <label> |
| 40 | Saturation |
| 41 | </label> |
| 42 | <div class="track-wrap"> |
| 43 | <input type="range" class="styled-slider" id="sat" min="0" max="100" value="80"/> |
| 44 | <div class="track-fill" id="sat-fill" style="width:80%"> |
| 45 | </div> |
| 46 | </div> |
| 47 | <div class="field-info"> |
| 48 | <span class="fi-icon"> |
| 49 | ◉ |
| 50 | </span> |
| 51 | <span class="fi-val" id="sat-val"> |
| 52 | 80% |
| 53 | </span> |
| 54 | </div> |
| 55 | </div> |
| 56 | </div> |
untitled.css
CSS
| 1 | .styled-demo { |
| 2 | max-width:360px; |
| 3 | margin:16px auto; |
| 4 | display:flex; |
| 5 | flex-direction:column; |
| 6 | gap:24px; |
| 7 | padding:24px; |
| 8 | font-family:system-ui, |
| 9 | sans-serif |
| 10 | } |
| 11 | .field { |
| 12 | display:flex; |
| 13 | flex-direction:column; |
| 14 | gap:8px |
| 15 | } |
| 16 | .field label { |
| 17 | font-size:12px; |
| 18 | font-weight:600; |
| 19 | color:#E0E0E0 |
| 20 | } |
| 21 | .track-wrap { |
| 22 | position:relative; |
| 23 | height:6px; |
| 24 | border-radius:3px; |
| 25 | background:#1A1A2E |
| 26 | } |
| 27 | .track-fill { |
| 28 | position:absolute; |
| 29 | top:0; |
| 30 | left:0; |
| 31 | height:100%; |
| 32 | border-radius:3px; |
| 33 | background:linear-gradient(90deg, |
| 34 | #00FF41, |
| 35 | #00CC33); |
| 36 | pointer-events:none; |
| 37 | transition:width .1s ease |
| 38 | } |
| 39 | .styled-slider { |
| 40 | position:absolute; |
| 41 | top:0; |
| 42 | left:0; |
| 43 | width:100%; |
| 44 | height:100%; |
| 45 | appearance:none; |
| 46 | background:transparent; |
| 47 | outline:none; |
| 48 | cursor:pointer; |
| 49 | z-index:2; |
| 50 | margin:0 |
| 51 | } |
| 52 | .styled-slider::-webkit-slider-thumb { |
| 53 | appearance:none; |
| 54 | width:18px; |
| 55 | height:18px; |
| 56 | border-radius:50%; |
| 57 | background:#00FF41; |
| 58 | cursor:pointer; |
| 59 | border:2px solid #0A0A0A; |
| 60 | box-shadow:0 0 8px rgba(0, |
| 61 | 255, |
| 62 | 65, |
| 63 | .3); |
| 64 | margin-top:-6px |
| 65 | } |
| 66 | .styled-slider::-moz-range-thumb { |
| 67 | width:18px; |
| 68 | height:18px; |
| 69 | border-radius:50%; |
| 70 | background:#00FF41; |
| 71 | cursor:pointer; |
| 72 | border:2px solid #0A0A0A |
| 73 | } |
| 74 | .styled-slider::-webkit-slider-runnable-track { |
| 75 | height:6px; |
| 76 | background:transparent; |
| 77 | border-radius:3px |
| 78 | } |
| 79 | .field-info { |
| 80 | display:flex; |
| 81 | align-items:center; |
| 82 | justify-content:space-between; |
| 83 | font-size:11px; |
| 84 | color:#808080 |
| 85 | } |
| 86 | .fi-icon { |
| 87 | font-size:14px |
| 88 | } |
| 89 | .fi-val { |
| 90 | font-variant-numeric:tabular-nums; |
| 91 | color:#00FF41; |
| 92 | font-weight:600 |
| 93 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.styled-slider').forEach(s=>{const fill=s.parentElement.querySelector('.track-fill');const val=s.closest('.field').querySelector('.fi-val');s.addEventListener('input',()=>{fill.style.width=s.value+'%';val.textContent=s.value+'%'})}) |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto p-6 bg-[#0A0A0A] space-y-6"> |
| 2 | <div class="space-y-2"> |
| 3 | <div class="flex justify-between items-center"> |
| 4 | <label class="text-xs font-semibold text-[#E0E0E0] inline-flex items-center gap-2"> |
| 5 | <svg class="w-4 h-4 text-[#00FF41]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 6 | <circle cx="12" cy="12" r="5"/> |
| 7 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 8 | </svg> |
| 9 | Brightness |
| 10 | </label> |
| 11 | <span id="tw-bright-val" class="text-xs font-semibold text-[#00FF41] tabular-nums"> |
| 12 | 65% |
| 13 | </span> |
| 14 | </div> |
| 15 | <div class="relative h-1.5 bg-[#1A1A2E] rounded"> |
| 16 | <div id="tw-bright-fill" class="absolute top-0 left-0 h-full rounded bg-gradient-to-r from-[#00FF41] to-[#00CC33] pointer-events-none" style="width:65%"> |
| 17 | </div> |
| 18 | <input id="tw-bright" type="range" min="0" max="100" value="65" class="absolute inset-0 w-full h-full appearance-none bg-transparent cursor-pointer accent-[#00FF41] z-10"> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="space-y-2"> |
| 22 | <div class="flex justify-between items-center"> |
| 23 | <label class="text-xs font-semibold text-[#E0E0E0] inline-flex items-center gap-2"> |
| 24 | <svg class="w-4 h-4 text-[#00FF41]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 25 | <circle cx="12" cy="12" r="10"/> |
| 26 | <path d="M12 2a10 10 0 0 1 0 20"/> |
| 27 | <path d="M12 12l5-5"/> |
| 28 | </svg> |
| 29 | Contrast |
| 30 | </label> |
| 31 | <span id="tw-contrast-val" class="text-xs font-semibold text-[#00FF41] tabular-nums"> |
| 32 | 40% |
| 33 | </span> |
| 34 | </div> |
| 35 | <div class="relative h-1.5 bg-[#1A1A2E] rounded"> |
| 36 | <div id="tw-contrast-fill" class="absolute top-0 left-0 h-full rounded bg-gradient-to-r from-[#00FF41] to-[#00CC33] pointer-events-none" style="width:40%"> |
| 37 | </div> |
| 38 | <input id="tw-contrast" type="range" min="0" max="100" value="40" class="absolute inset-0 w-full h-full appearance-none bg-transparent cursor-pointer accent-[#00FF41] z-10"> |
| 39 | </div> |
| 40 | </div> |
| 41 | <div class="space-y-2"> |
| 42 | <div class="flex justify-between items-center"> |
| 43 | <label class="text-xs font-semibold text-[#E0E0E0] inline-flex items-center gap-2"> |
| 44 | <svg class="w-4 h-4 text-[#00FF41]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 45 | <circle cx="12" cy="12" r="8"/> |
| 46 | <circle cx="12" cy="12" r="3" fill="currentColor"/> |
| 47 | </svg> |
| 48 | Saturation |
| 49 | </label> |
| 50 | <span id="tw-sat-val" class="text-xs font-semibold text-[#00FF41] tabular-nums"> |
| 51 | 80% |
| 52 | </span> |
| 53 | </div> |
| 54 | <div class="relative h-1.5 bg-[#1A1A2E] rounded"> |
| 55 | <div id="tw-sat-fill" class="absolute top-0 left-0 h-full rounded bg-gradient-to-r from-[#00FF41] to-[#00CC33] pointer-events-none" style="width:80%"> |
| 56 | </div> |
| 57 | <input id="tw-sat" type="range" min="0" max="100" value="80" class="absolute inset-0 w-full h-full appearance-none bg-transparent cursor-pointer accent-[#00FF41] z-10"> |
| 58 | </div> |
| 59 | </div> |
| 60 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .st-thumb::-webkit-slider-thumb{background:#00FF41;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 3 | .st-thumb::-moz-range-thumb{background:#00FF41;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 4 | .st-thumb::-webkit-slider-runnable-track{background:transparent;height:6px} |
| 5 | .st-thumb::-moz-range-track{background:transparent;height:6px} |
| 6 | </style> |
| 7 | <div class="w-100" style="max-width:360px"> |
| 8 | <div class="mb-3"> |
| 9 | <div class="d-flex justify-content-between align-items-center mb-1"> |
| 10 | <label class="form-label mb-0 small fw-semibold" style="color:#E0E0E0"> |
| 11 | Brightness |
| 12 | </label> |
| 13 | <span id="bs-bright-val" class="small fw-semibold" style="color:#00FF41"> |
| 14 | 65% |
| 15 | </span> |
| 16 | </div> |
| 17 | <div class="position-relative" style="height:6px;background:#1A1A2E;border-radius:3px"> |
| 18 | <div id="bs-bright-fill" class="position-absolute top-0 start-0 h-100 rounded" style="width:65%;background:linear-gradient(90deg,#00FF41,#00CC33)"> |
| 19 | </div> |
| 20 | <input id="bs-bright" type="range" class="form-range st-thumb position-absolute top-0 start-0 w-100 h-100" style="margin:0" min="0" max="100" value="65"> |
| 21 | </div> |
| 22 | </div> |
| 23 | <div class="mb-3"> |
| 24 | <div class="d-flex justify-content-between align-items-center mb-1"> |
| 25 | <label class="form-label mb-0 small fw-semibold" style="color:#E0E0E0"> |
| 26 | Contrast |
| 27 | </label> |
| 28 | <span id="bs-contrast-val" class="small fw-semibold" style="color:#00FF41"> |
| 29 | 40% |
| 30 | </span> |
| 31 | </div> |
| 32 | <div class="position-relative" style="height:6px;background:#1A1A2E;border-radius:3px"> |
| 33 | <div id="bs-contrast-fill" class="position-absolute top-0 start-0 h-100 rounded" style="width:40%;background:linear-gradient(90deg,#00FF41,#00CC33)"> |
| 34 | </div> |
| 35 | <input id="bs-contrast" type="range" class="form-range st-thumb position-absolute top-0 start-0 w-100 h-100" style="margin:0" min="0" max="100" value="40"> |
| 36 | </div> |
| 37 | </div> |
| 38 | <div> |
| 39 | <div class="d-flex justify-content-between align-items-center mb-1"> |
| 40 | <label class="form-label mb-0 small fw-semibold" style="color:#E0E0E0"> |
| 41 | Saturation |
| 42 | </label> |
| 43 | <span id="bs-sat-val" class="small fw-semibold" style="color:#00FF41"> |
| 44 | 80% |
| 45 | </span> |
| 46 | </div> |
| 47 | <div class="position-relative" style="height:6px;background:#1A1A2E;border-radius:3px"> |
| 48 | <div id="bs-sat-fill" class="position-absolute top-0 start-0 h-100 rounded" style="width:80%;background:linear-gradient(90deg,#00FF41,#00CC33)"> |
| 49 | </div> |
| 50 | <input id="bs-sat" type="range" class="form-range st-thumb position-absolute top-0 start-0 w-100 h-100" style="margin:0" min="0" max="100" value="80"> |
| 51 | </div> |
| 52 | </div> |
| 53 | </div> |
Color Variants
Different accent colors for different contexts — success, info, and danger. Keep the same layout and swap the thumb/track color.
color-variants
Live
untitled.html
HTML
| 1 | <div class="variant-demo"> |
| 2 | <div class="v-field"> |
| 3 | <label> |
| 4 | Success |
| 5 | </label> |
| 6 | <input type="range" class="slider success" id="v-success" min="0" max="100" value="65"/> |
| 7 | <span class="v-val" id="vs-val"> |
| 8 | 65 |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="v-field"> |
| 12 | <label> |
| 13 | Info |
| 14 | </label> |
| 15 | <input type="range" class="slider info" id="v-info" min="0" max="100" value="40"/> |
| 16 | <span class="v-val" id="vi-val"> |
| 17 | 40 |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="v-field"> |
| 21 | <label> |
| 22 | Danger |
| 23 | </label> |
| 24 | <input type="range" class="slider danger" id="v-danger" min="0" max="100" value="80"/> |
| 25 | <span class="v-val" id="vd-val"> |
| 26 | 80 |
| 27 | </span> |
| 28 | </div> |
| 29 | </div> |
untitled.css
CSS
| 1 | .variant-demo { |
| 2 | max-width:360px; |
| 3 | margin:16px auto; |
| 4 | display:flex; |
| 5 | flex-direction:column; |
| 6 | gap:20px; |
| 7 | padding:24px; |
| 8 | font-family:system-ui, |
| 9 | sans-serif |
| 10 | } |
| 11 | .v-field { |
| 12 | display:flex; |
| 13 | flex-direction:column; |
| 14 | gap:6px |
| 15 | } |
| 16 | .v-field label { |
| 17 | font-size:11px; |
| 18 | font-weight:600; |
| 19 | color:#808080; |
| 20 | text-transform:uppercase; |
| 21 | letter-spacing:.5px |
| 22 | } |
| 23 | .slider { |
| 24 | width:100%; |
| 25 | height:6px; |
| 26 | border-radius:3px; |
| 27 | appearance:none; |
| 28 | background:#1A1A2E; |
| 29 | outline:none; |
| 30 | cursor:pointer |
| 31 | } |
| 32 | .slider::-webkit-slider-thumb { |
| 33 | appearance:none; |
| 34 | width:18px; |
| 35 | height:18px; |
| 36 | border-radius:50%; |
| 37 | cursor:pointer; |
| 38 | border:2px solid #0A0A0A |
| 39 | } |
| 40 | .slider::-moz-range-thumb { |
| 41 | width:18px; |
| 42 | height:18px; |
| 43 | border-radius:50%; |
| 44 | cursor:pointer; |
| 45 | border:2px solid #0A0A0A |
| 46 | } |
| 47 | .slider.success::-webkit-slider-thumb { |
| 48 | background:#00FF41 |
| 49 | } |
| 50 | .slider.success::-moz-range-thumb { |
| 51 | background:#00FF41 |
| 52 | } |
| 53 | .slider.info::-webkit-slider-thumb { |
| 54 | background:#3B82F6 |
| 55 | } |
| 56 | .slider.info::-moz-range-thumb { |
| 57 | background:#3B82F6 |
| 58 | } |
| 59 | .slider.danger::-webkit-slider-thumb { |
| 60 | background:#EF4444 |
| 61 | } |
| 62 | .slider.danger::-moz-range-thumb { |
| 63 | background:#EF4444 |
| 64 | } |
| 65 | .v-val { |
| 66 | font-size:11px; |
| 67 | font-weight:600; |
| 68 | font-variant-numeric:tabular-nums |
| 69 | } |
| 70 | .v-val.success { |
| 71 | color:#00FF41 |
| 72 | } |
| 73 | .v-val.info { |
| 74 | color:#3B82F6 |
| 75 | } |
| 76 | .v-val.danger { |
| 77 | color:#EF4444 |
| 78 | } |
untitled.js
JavaScript
| 1 | ['success','info','danger'].forEach(c=>{const s=document.getElementById('v-'+c);const v=document.getElementById('v'+c[0]+'-val');s.addEventListener('input',()=>v.textContent=s.value)}) |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto p-6 bg-[#0A0A0A] space-y-5"> |
| 2 | <div class="space-y-1.5"> |
| 3 | <label class="text-[11px] font-semibold text-[#808080] uppercase tracking-wider"> |
| 4 | Success |
| 5 | </label> |
| 6 | <input id="tw-vs" type="range" min="0" max="100" value="65" class="w-full h-1.5 rounded-lg appearance-none cursor-pointer accent-[#00FF41] bg-[#1A1A2E]"> |
| 7 | <div id="tw-vs-val" class="text-[11px] font-semibold text-[#00FF41] tabular-nums"> |
| 8 | 65 |
| 9 | </div> |
| 10 | </div> |
| 11 | <div class="space-y-1.5"> |
| 12 | <label class="text-[11px] font-semibold text-[#808080] uppercase tracking-wider"> |
| 13 | Info |
| 14 | </label> |
| 15 | <input id="tw-vi" type="range" min="0" max="100" value="40" class="w-full h-1.5 rounded-lg appearance-none cursor-pointer accent-[#3B82F6] bg-[#1A1A2E]"> |
| 16 | <div id="tw-vi-val" class="text-[11px] font-semibold text-[#3B82F6] tabular-nums"> |
| 17 | 40 |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="space-y-1.5"> |
| 21 | <label class="text-[11px] font-semibold text-[#808080] uppercase tracking-wider"> |
| 22 | Danger |
| 23 | </label> |
| 24 | <input id="tw-vd" type="range" min="0" max="100" value="80" class="w-full h-1.5 rounded-lg appearance-none cursor-pointer accent-[#EF4444] bg-[#1A1A2E]"> |
| 25 | <div id="tw-vd-val" class="text-[11px] font-semibold text-[#EF4444] tabular-nums"> |
| 26 | 80 |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .v-success::-webkit-slider-thumb{background:#00FF41;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 3 | .v-success::-moz-range-thumb{background:#00FF41;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 4 | .v-info::-webkit-slider-thumb{background:#3B82F6;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 5 | .v-info::-moz-range-thumb{background:#3B82F6;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 6 | .v-danger::-webkit-slider-thumb{background:#EF4444;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 7 | .v-danger::-moz-range-thumb{background:#EF4444;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 8 | .v-range::-webkit-slider-runnable-track{background:#1A1A2E;height:6px;border-radius:3px} |
| 9 | .v-range::-moz-range-track{background:#1A1A2E;height:6px;border-radius:3px} |
| 10 | </style> |
| 11 | <div class="w-100" style="max-width:360px"> |
| 12 | <div class="mb-3"> |
| 13 | <label class="form-label mb-1 small fw-semibold" style="color:#808080"> |
| 14 | SUCCESS |
| 15 | </label> |
| 16 | <input id="bs-vs" type="range" class="form-range v-range v-success" min="0" max="100" value="65"> |
| 17 | <div id="bs-vs-val" class="small fw-semibold" style="color:#00FF41"> |
| 18 | 65 |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="mb-3"> |
| 22 | <label class="form-label mb-1 small fw-semibold" style="color:#808080"> |
| 23 | INFO |
| 24 | </label> |
| 25 | <input id="bs-vi" type="range" class="form-range v-range v-info" min="0" max="100" value="40"> |
| 26 | <div id="bs-vi-val" class="small fw-semibold" style="color:#3B82F6"> |
| 27 | 40 |
| 28 | </div> |
| 29 | </div> |
| 30 | <div> |
| 31 | <label class="form-label mb-1 small fw-semibold" style="color:#808080"> |
| 32 | DANGER |
| 33 | </label> |
| 34 | <input id="bs-vd" type="range" class="form-range v-range v-danger" min="0" max="100" value="80"> |
| 35 | <div id="bs-vd-val" class="small fw-semibold" style="color:#EF4444"> |
| 36 | 80 |
| 37 | </div> |
| 38 | </div> |
| 39 | </div> |
Step Slider
A slider with discrete step increments and labeled tick marks. The step attribute constrains values to specific intervals.
step-slider
Live
untitled.html
HTML
| 1 | <div class="step-demo"> |
| 2 | <div class="step-header"> |
| 3 | <span class="step-title"> |
| 4 | Zoom Level |
| 5 | </span> |
| 6 | <span class="step-val" id="step-val"> |
| 7 | 2x |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="step-track"> |
| 11 | <input type="range" class="step-slider" id="step-slider" min="0" max="4" step="1" value="2"/> |
| 12 | <div class="step-ticks"> |
| 13 | <span class="tick"> |
| 14 | </span> |
| 15 | <span class="tick"> |
| 16 | </span> |
| 17 | <span class="tick active"> |
| 18 | </span> |
| 19 | <span class="tick"> |
| 20 | </span> |
| 21 | <span class="tick"> |
| 22 | </span> |
| 23 | </div> |
| 24 | <div class="step-labels"> |
| 25 | <span> |
| 26 | 0.5x |
| 27 | </span> |
| 28 | <span> |
| 29 | 1x |
| 30 | </span> |
| 31 | <span> |
| 32 | 2x |
| 33 | </span> |
| 34 | <span> |
| 35 | 4x |
| 36 | </span> |
| 37 | <span> |
| 38 | 8x |
| 39 | </span> |
| 40 | </div> |
| 41 | </div> |
| 42 | </div> |
untitled.css
CSS
| 1 | .step-demo { |
| 2 | max-width:360px; |
| 3 | margin:16px auto; |
| 4 | padding:24px; |
| 5 | font-family:system-ui, |
| 6 | sans-serif |
| 7 | } |
| 8 | .step-header { |
| 9 | display:flex; |
| 10 | align-items:center; |
| 11 | justify-content:space-between; |
| 12 | margin-bottom:16px |
| 13 | } |
| 14 | .step-title { |
| 15 | font-size:12px; |
| 16 | font-weight:600; |
| 17 | color:#E0E0E0 |
| 18 | } |
| 19 | .step-val { |
| 20 | font-size:14px; |
| 21 | color:#00FF41; |
| 22 | font-weight:700; |
| 23 | font-variant-numeric:tabular-nums |
| 24 | } |
| 25 | .step-track { |
| 26 | position:relative |
| 27 | } |
| 28 | .step-slider { |
| 29 | width:100%; |
| 30 | height:6px; |
| 31 | appearance:none; |
| 32 | background:linear-gradient(90deg, |
| 33 | #00FF41 50%, |
| 34 | #2A2A3E 50%); |
| 35 | border-radius:3px; |
| 36 | outline:none; |
| 37 | cursor:pointer; |
| 38 | z-index:2; |
| 39 | position:relative |
| 40 | } |
| 41 | .step-slider::-webkit-slider-thumb { |
| 42 | appearance:none; |
| 43 | width:20px; |
| 44 | height:20px; |
| 45 | border-radius:50%; |
| 46 | background:#00FF41; |
| 47 | cursor:pointer; |
| 48 | border:3px solid #0A0A0A; |
| 49 | box-shadow:0 0 10px rgba(0, |
| 50 | 255, |
| 51 | 65, |
| 52 | .4) |
| 53 | } |
| 54 | .step-slider::-moz-range-thumb { |
| 55 | width:20px; |
| 56 | height:20px; |
| 57 | border-radius:50%; |
| 58 | background:#00FF41; |
| 59 | cursor:pointer; |
| 60 | border:3px solid #0A0A0A |
| 61 | } |
| 62 | .step-ticks { |
| 63 | display:flex; |
| 64 | justify-content:space-between; |
| 65 | padding:0 8px; |
| 66 | margin-top:-8px; |
| 67 | position:relative; |
| 68 | z-index:1 |
| 69 | } |
| 70 | .tick { |
| 71 | width:4px; |
| 72 | height:4px; |
| 73 | border-radius:50%; |
| 74 | background:#444; |
| 75 | transition:all .2s |
| 76 | } |
| 77 | .tick.active { |
| 78 | background:#00FF41; |
| 79 | box-shadow:0 0 6px rgba(0, |
| 80 | 255, |
| 81 | 65, |
| 82 | .5) |
| 83 | } |
| 84 | .step-labels { |
| 85 | display:flex; |
| 86 | justify-content:space-between; |
| 87 | margin-top:12px; |
| 88 | font-size:10px; |
| 89 | color:#666; |
| 90 | font-variant-numeric:tabular-nums |
| 91 | } |
untitled.js
JavaScript
| 1 | const labels=['0.5x','1x','2x','4x','8x'];const slider=document.getElementById('step-slider');const val=document.getElementById('step-val');const ticks=document.querySelectorAll('.tick');function updateStep(){const i=parseInt(slider.value);val.textContent=labels[i];ticks.forEach((t,j)=>{t.classList.toggle('active',j<=i)});const pct=(i/4)*100;slider.style.background='linear-gradient(90deg,#00FF41 '+pct+'%,#2A2A3E '+pct+'%)'}slider.addEventListener('input',updateStep);updateStep() |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex justify-between items-center mb-4"> |
| 3 | <span class="text-xs font-semibold text-[#E0E0E0]"> |
| 4 | Zoom Level |
| 5 | </span> |
| 6 | <span id="tw-step-val" class="text-sm font-bold text-[#00FF41] tabular-nums"> |
| 7 | 2x |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="relative"> |
| 11 | <input id="tw-step" type="range" min="0" max="4" step="1" value="2" class="w-full h-1.5 rounded-lg appearance-none cursor-pointer accent-[#00FF41] relative z-10" style="background:linear-gradient(90deg,#00FF41 50%,#2A2A3E 50%)"> |
| 12 | <div id="tw-ticks" class="flex justify-between px-2 -mt-2 relative z-0"> |
| 13 | <span class="w-1 h-1 rounded-full bg-[#444]"> |
| 14 | </span> |
| 15 | <span class="w-1 h-1 rounded-full bg-[#444]"> |
| 16 | </span> |
| 17 | <span class="w-1 h-1 rounded-full bg-[#444]"> |
| 18 | </span> |
| 19 | <span class="w-1 h-1 rounded-full bg-[#444]"> |
| 20 | </span> |
| 21 | <span class="w-1 h-1 rounded-full bg-[#444]"> |
| 22 | </span> |
| 23 | </div> |
| 24 | </div> |
| 25 | <div class="flex justify-between mt-3 text-[10px] text-[#666] tabular-nums"> |
| 26 | <span> |
| 27 | 0.5x |
| 28 | </span> |
| 29 | <span> |
| 30 | 1x |
| 31 | </span> |
| 32 | <span> |
| 33 | 2x |
| 34 | </span> |
| 35 | <span> |
| 36 | 4x |
| 37 | </span> |
| 38 | <span> |
| 39 | 8x |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .bs-step::-webkit-slider-thumb{background:#00FF41;border:3px solid #0A0A0A;width:20px;height:20px;border-radius:50%;box-shadow:0 0 10px rgba(0,255,65,.4)} |
| 3 | .bs-step::-moz-range-thumb{background:#00FF41;border:3px solid #0A0A0A;width:20px;height:20px;border-radius:50%} |
| 4 | .bs-step::-webkit-slider-runnable-track{background:transparent;height:6px;border-radius:3px} |
| 5 | .bs-step::-moz-range-track{background:transparent;height:6px;border-radius:3px} |
| 6 | </style> |
| 7 | <div class="w-100" style="max-width:360px"> |
| 8 | <div class="d-flex justify-content-between align-items-center mb-3"> |
| 9 | <span class="small fw-semibold" style="color:#E0E0E0"> |
| 10 | Zoom Level |
| 11 | </span> |
| 12 | <span id="bs-step-val" class="fw-bold" style="color:#00FF41"> |
| 13 | 2x |
| 14 | </span> |
| 15 | </div> |
| 16 | <div class="position-relative"> |
| 17 | <input id="bs-step" type="range" class="form-range bs-step position-relative" min="0" max="4" step="1" value="2" style="z-index:2"> |
| 18 | <div id="bs-ticks" class="d-flex justify-content-between px-2 position-absolute top-50 start-0 end-0 translate-middle-y" style="margin-top:-2px;z-index:1"> |
| 19 | <span class="d-inline-block rounded-circle" style="width:4px;height:4px;background:#444"> |
| 20 | </span> |
| 21 | <span class="d-inline-block rounded-circle" style="width:4px;height:4px;background:#444"> |
| 22 | </span> |
| 23 | <span class="d-inline-block rounded-circle" style="width:4px;height:4px;background:#444"> |
| 24 | </span> |
| 25 | <span class="d-inline-block rounded-circle" style="width:4px;height:4px;background:#444"> |
| 26 | </span> |
| 27 | <span class="d-inline-block rounded-circle" style="width:4px;height:4px;background:#444"> |
| 28 | </span> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="d-flex justify-content-between mt-3" style="font-size:10px;color:#666"> |
| 32 | <span> |
| 33 | 0.5x |
| 34 | </span> |
| 35 | <span> |
| 36 | 1x |
| 37 | </span> |
| 38 | <span> |
| 39 | 2x |
| 40 | </span> |
| 41 | <span> |
| 42 | 4x |
| 43 | </span> |
| 44 | <span> |
| 45 | 8x |
| 46 | </span> |
| 47 | </div> |
| 48 | </div> |
Price Range (Dual Handle)
A dual-handle range slider for selecting a price range. Two overlapping range inputs create the min/max handles, with the track highlight between them.
price-range
Live
untitled.html
HTML
| 1 | <div class="range-demo"> |
| 2 | <div class="range-header"> |
| 3 | <span class="range-title"> |
| 4 | Price Range |
| 5 | </span> |
| 6 | <span class="range-display"> |
| 7 | $ |
| 8 | <span id="min-disp"> |
| 9 | 25 |
| 10 | </span> |
| 11 | — $ |
| 12 | <span id="max-disp"> |
| 13 | 75 |
| 14 | </span> |
| 15 | </span> |
| 16 | </div> |
| 17 | <div class="range-track"> |
| 18 | <div class="range-fill" id="range-fill"> |
| 19 | </div> |
| 20 | <input type="range" class="range-input" id="range-min" min="0" max="100" value="25"/> |
| 21 | <input type="range" class="range-input" id="range-max" min="0" max="100" value="75"/> |
| 22 | </div> |
| 23 | <div class="range-labels"> |
| 24 | <span> |
| 25 | $0 |
| 26 | </span> |
| 27 | <span> |
| 28 | $50 |
| 29 | </span> |
| 30 | <span> |
| 31 | $100 |
| 32 | </span> |
| 33 | </div> |
| 34 | </div> |
untitled.css
CSS
| 1 | .range-demo { |
| 2 | max-width:360px; |
| 3 | margin:16px auto; |
| 4 | padding:24px; |
| 5 | font-family:system-ui, |
| 6 | sans-serif |
| 7 | } |
| 8 | .range-header { |
| 9 | display:flex; |
| 10 | align-items:center; |
| 11 | justify-content:space-between; |
| 12 | margin-bottom:16px |
| 13 | } |
| 14 | .range-title { |
| 15 | font-size:12px; |
| 16 | font-weight:600; |
| 17 | color:#E0E0E0 |
| 18 | } |
| 19 | .range-display { |
| 20 | font-size:12px; |
| 21 | color:#00FF41; |
| 22 | font-weight:600; |
| 23 | font-variant-numeric:tabular-nums |
| 24 | } |
| 25 | .range-track { |
| 26 | position:relative; |
| 27 | height:6px; |
| 28 | border-radius:3px; |
| 29 | background:#1A1A2E |
| 30 | } |
| 31 | .range-fill { |
| 32 | position:absolute; |
| 33 | top:0; |
| 34 | height:100%; |
| 35 | border-radius:3px; |
| 36 | background:linear-gradient(90deg, |
| 37 | #00FF41, |
| 38 | #00CC33); |
| 39 | pointer-events:none; |
| 40 | z-index:1 |
| 41 | } |
| 42 | .range-input { |
| 43 | position:absolute; |
| 44 | top:0; |
| 45 | left:0; |
| 46 | width:100%; |
| 47 | height:100%; |
| 48 | appearance:none; |
| 49 | background:transparent; |
| 50 | outline:none; |
| 51 | cursor:pointer; |
| 52 | z-index:2; |
| 53 | margin:0; |
| 54 | pointer-events:none |
| 55 | } |
| 56 | .range-input::-webkit-slider-thumb { |
| 57 | appearance:none; |
| 58 | width:18px; |
| 59 | height:18px; |
| 60 | border-radius:50%; |
| 61 | background:#00FF41; |
| 62 | cursor:pointer; |
| 63 | border:2px solid #0A0A0A; |
| 64 | box-shadow:0 0 8px rgba(0, |
| 65 | 255, |
| 66 | 65, |
| 67 | .3); |
| 68 | margin-top:-6px; |
| 69 | pointer-events:all |
| 70 | } |
| 71 | .range-input::-moz-range-thumb { |
| 72 | width:18px; |
| 73 | height:18px; |
| 74 | border-radius:50%; |
| 75 | background:#00FF41; |
| 76 | cursor:pointer; |
| 77 | border:2px solid #0A0A0A; |
| 78 | pointer-events:all |
| 79 | } |
| 80 | .range-labels { |
| 81 | display:flex; |
| 82 | justify-content:space-between; |
| 83 | margin-top:8px; |
| 84 | font-size:10px; |
| 85 | color:#666 |
| 86 | } |
untitled.js
JavaScript
| 1 | const minI=document.getElementById('range-min');const maxI=document.getElementById('range-max');const fill=document.getElementById('range-fill');const minD=document.getElementById('min-disp');const maxD=document.getElementById('max-disp');function updateRange(){const min=parseInt(minI.value);const max=parseInt(maxI.value);const lo=Math.min(min,max);const hi=Math.max(min,max);fill.style.left=lo+'%';fill.style.width=(hi-lo)+'%';minD.textContent=lo;maxD.textContent=hi}minI.addEventListener('input',updateRange);maxI.addEventListener('input',updateRange);updateRange() |
untitled.html
HTML
| 1 | <style> |
| 2 | .dual-thumb::-webkit-slider-thumb{pointer-events:all} |
| 3 | .dual-thumb::-moz-range-thumb{pointer-events:all} |
| 4 | </style> |
| 5 | <div class="max-w-sm mx-auto p-6 bg-[#0A0A0A]"> |
| 6 | <div class="flex justify-between items-center mb-4"> |
| 7 | <span class="text-xs font-semibold text-[#E0E0E0]"> |
| 8 | Price Range |
| 9 | </span> |
| 10 | <span class="text-xs font-semibold text-[#00FF41] tabular-nums"> |
| 11 | $ |
| 12 | <span id="tw-min"> |
| 13 | 25 |
| 14 | </span> |
| 15 | — $ |
| 16 | <span id="tw-max"> |
| 17 | 75 |
| 18 | </span> |
| 19 | </span> |
| 20 | </div> |
| 21 | <div class="relative h-1.5 bg-[#1A1A2E] rounded"> |
| 22 | <div id="tw-fill" class="absolute top-0 h-full rounded bg-gradient-to-r from-[#00FF41] to-[#00CC33] pointer-events-none"> |
| 23 | </div> |
| 24 | <input id="tw-min-input" type="range" min="0" max="100" value="25" class="absolute top-0 left-0 w-full h-full appearance-none bg-transparent cursor-pointer accent-[#00FF41] pointer-events-none dual-thumb"> |
| 25 | <input id="tw-max-input" type="range" min="0" max="100" value="75" class="absolute top-0 left-0 w-full h-full appearance-none bg-transparent cursor-pointer accent-[#00FF41] pointer-events-none dual-thumb"> |
| 26 | </div> |
| 27 | <div class="flex justify-between mt-2 text-[10px] text-[#666] tabular-nums"> |
| 28 | <span> |
| 29 | $0 |
| 30 | </span> |
| 31 | <span> |
| 32 | $50 |
| 33 | </span> |
| 34 | <span> |
| 35 | $100 |
| 36 | </span> |
| 37 | </div> |
| 38 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .bs-dual::-webkit-slider-thumb{background:#00FF41;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%;pointer-events:all} |
| 3 | .bs-dual::-moz-range-thumb{background:#00FF41;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%;pointer-events:all} |
| 4 | .bs-dual::-webkit-slider-runnable-track{background:transparent;height:6px} |
| 5 | .bs-dual::-moz-range-track{background:transparent;height:6px} |
| 6 | </style> |
| 7 | <div class="w-100" style="max-width:360px"> |
| 8 | <div class="d-flex justify-content-between align-items-center mb-3"> |
| 9 | <span class="small fw-semibold" style="color:#E0E0E0"> |
| 10 | Price Range |
| 11 | </span> |
| 12 | <span class="small fw-semibold" style="color:#00FF41"> |
| 13 | $ |
| 14 | <span id="bs-min"> |
| 15 | 25 |
| 16 | </span> |
| 17 | — $ |
| 18 | <span id="bs-max"> |
| 19 | 75 |
| 20 | </span> |
| 21 | </span> |
| 22 | </div> |
| 23 | <div class="position-relative" style="height:6px;background:#1A1A2E;border-radius:3px"> |
| 24 | <div id="bs-fill" class="position-absolute top-0 h-100 rounded" style="background:linear-gradient(90deg,#00FF41,#00CC33)"> |
| 25 | </div> |
| 26 | <input id="bs-min-input" type="range" class="bs-dual position-absolute top-0 start-0 w-100 h-100" style="appearance:none;background:transparent;cursor:pointer;pointer-events:none;margin:0;z-index:2" min="0" max="100" value="25"> |
| 27 | <input id="bs-max-input" type="range" class="bs-dual position-absolute top-0 start-0 w-100 h-100" style="appearance:none;background:transparent;cursor:pointer;pointer-events:none;margin:0;z-index:2" min="0" max="100" value="75"> |
| 28 | </div> |
| 29 | <div class="d-flex justify-content-between mt-2" style="font-size:10px;color:#666"> |
| 30 | <span> |
| 31 | $0 |
| 32 | </span> |
| 33 | <span> |
| 34 | $50 |
| 35 | </span> |
| 36 | <span> |
| 37 | $100 |
| 38 | </span> |
| 39 | </div> |
| 40 | </div> |
Vertical Slider
Vertical sliders for volume-mixer-style layouts. Each channel displays its value above and label below.
vertical
Live
untitled.html
HTML
| 1 | <div class="vert-demo"> |
| 2 | <div class="vert-group"> |
| 3 | <input type="range" class="vert-slider" orient="vertical" min="0" max="100" value="30"/> |
| 4 | <span class="vert-val" id="v1"> |
| 5 | 30 |
| 6 | </span> |
| 7 | <span class="vert-ch"> |
| 8 | CH 1 |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="vert-group"> |
| 12 | <input type="range" class="vert-slider" orient="vertical" min="0" max="100" value="65"/> |
| 13 | <span class="vert-val" id="v2"> |
| 14 | 65 |
| 15 | </span> |
| 16 | <span class="vert-ch"> |
| 17 | CH 2 |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="vert-group"> |
| 21 | <input type="range" class="vert-slider" orient="vertical" min="0" max="100" value="80"/> |
| 22 | <span class="vert-val" id="v3"> |
| 23 | 80 |
| 24 | </span> |
| 25 | <span class="vert-ch"> |
| 26 | CH 3 |
| 27 | </span> |
| 28 | </div> |
| 29 | <div class="vert-group"> |
| 30 | <input type="range" class="vert-slider" orient="vertical" min="0" max="100" value="45"/> |
| 31 | <span class="vert-val" id="v4"> |
| 32 | 45 |
| 33 | </span> |
| 34 | <span class="vert-ch"> |
| 35 | CH 4 |
| 36 | </span> |
| 37 | </div> |
| 38 | <div class="vert-group"> |
| 39 | <input type="range" class="vert-slider" orient="vertical" min="0" max="100" value="90"/> |
| 40 | <span class="vert-val" id="v5"> |
| 41 | 90 |
| 42 | </span> |
| 43 | <span class="vert-ch"> |
| 44 | CH 5 |
| 45 | </span> |
| 46 | </div> |
| 47 | </div> |
untitled.css
CSS
| 1 | .vert-demo { |
| 2 | display:flex; |
| 3 | gap:24px; |
| 4 | align-items:flex-end; |
| 5 | justify-content:center; |
| 6 | padding:32px; |
| 7 | font-family:system-ui, |
| 8 | sans-serif |
| 9 | } |
| 10 | .vert-group { |
| 11 | display:flex; |
| 12 | flex-direction:column; |
| 13 | align-items:center; |
| 14 | gap:8px |
| 15 | } |
| 16 | .vert-slider { |
| 17 | writing-mode:vertical-lr; |
| 18 | direction:rtl; |
| 19 | width:6px; |
| 20 | height:140px; |
| 21 | appearance:none; |
| 22 | background:#1A1A2E; |
| 23 | border-radius:3px; |
| 24 | outline:none; |
| 25 | cursor:pointer |
| 26 | } |
| 27 | .vert-slider::-webkit-slider-thumb { |
| 28 | appearance:none; |
| 29 | width:16px; |
| 30 | height:16px; |
| 31 | border-radius:50%; |
| 32 | background:#00FF41; |
| 33 | cursor:pointer; |
| 34 | border:2px solid #0A0A0A; |
| 35 | box-shadow:0 0 6px rgba(0, |
| 36 | 255, |
| 37 | 65, |
| 38 | .3) |
| 39 | } |
| 40 | .vert-slider::-moz-range-thumb { |
| 41 | width:16px; |
| 42 | height:16px; |
| 43 | border-radius:50%; |
| 44 | background:#00FF41; |
| 45 | cursor:pointer; |
| 46 | border:2px solid #0A0A0A |
| 47 | } |
| 48 | .vert-val { |
| 49 | font-size:11px; |
| 50 | font-weight:600; |
| 51 | color:#00FF41; |
| 52 | font-variant-numeric:tabular-nums |
| 53 | } |
| 54 | .vert-ch { |
| 55 | font-size:9px; |
| 56 | color:#666; |
| 57 | text-transform:uppercase; |
| 58 | letter-spacing:.5px |
| 59 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.vert-slider').forEach(s=>{const val=s.closest('.vert-group').querySelector('.vert-val');s.addEventListener('input',()=>val.textContent=s.value)}) |
untitled.html
HTML
| 1 | <div class="flex gap-6 items-end justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="flex flex-col items-center gap-2"> |
| 3 | <input type="range" orient="vertical" min="0" max="100" value="30" class="accent-[#00FF41] appearance-none bg-[#1A1A2E] rounded cursor-pointer" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px"> |
| 4 | <span class="text-xs font-semibold text-[#00FF41] tabular-nums"> |
| 5 | 30 |
| 6 | </span> |
| 7 | <span class="text-[9px] text-[#666] uppercase tracking-wider"> |
| 8 | CH 1 |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="flex flex-col items-center gap-2"> |
| 12 | <input type="range" orient="vertical" min="0" max="100" value="65" class="accent-[#00FF41] appearance-none bg-[#1A1A2E] rounded cursor-pointer" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px"> |
| 13 | <span class="text-xs font-semibold text-[#00FF41] tabular-nums"> |
| 14 | 65 |
| 15 | </span> |
| 16 | <span class="text-[9px] text-[#666] uppercase tracking-wider"> |
| 17 | CH 2 |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="flex flex-col items-center gap-2"> |
| 21 | <input type="range" orient="vertical" min="0" max="100" value="80" class="accent-[#00FF41] appearance-none bg-[#1A1A2E] rounded cursor-pointer" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px"> |
| 22 | <span class="text-xs font-semibold text-[#00FF41] tabular-nums"> |
| 23 | 80 |
| 24 | </span> |
| 25 | <span class="text-[9px] text-[#666] uppercase tracking-wider"> |
| 26 | CH 3 |
| 27 | </span> |
| 28 | </div> |
| 29 | <div class="flex flex-col items-center gap-2"> |
| 30 | <input type="range" orient="vertical" min="0" max="100" value="45" class="accent-[#00FF41] appearance-none bg-[#1A1A2E] rounded cursor-pointer" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px"> |
| 31 | <span class="text-xs font-semibold text-[#00FF41] tabular-nums"> |
| 32 | 45 |
| 33 | </span> |
| 34 | <span class="text-[9px] text-[#666] uppercase tracking-wider"> |
| 35 | CH 4 |
| 36 | </span> |
| 37 | </div> |
| 38 | <div class="flex flex-col items-center gap-2"> |
| 39 | <input type="range" orient="vertical" min="0" max="100" value="90" class="accent-[#00FF41] appearance-none bg-[#1A1A2E] rounded cursor-pointer" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px"> |
| 40 | <span class="text-xs font-semibold text-[#00FF41] tabular-nums"> |
| 41 | 90 |
| 42 | </span> |
| 43 | <span class="text-[9px] text-[#666] uppercase tracking-wider"> |
| 44 | CH 5 |
| 45 | </span> |
| 46 | </div> |
| 47 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .bs-vert::-webkit-slider-thumb{background:#00FF41;border:2px solid #0A0A0A;width:16px;height:16px;border-radius:50%} |
| 3 | .bs-vert::-moz-range-thumb{background:#00FF41;border:2px solid #0A0A0A;width:16px;height:16px;border-radius:50%} |
| 4 | .bs-vert::-webkit-slider-runnable-track{background:transparent} |
| 5 | .bs-vert::-moz-range-track{background:transparent} |
| 6 | </style> |
| 7 | <div class="d-flex gap-4 align-items-end justify-content-center p-4"> |
| 8 | <div class="d-flex flex-column align-items-center gap-2"> |
| 9 | <input type="range" orient="vertical" min="0" max="100" value="30" class="form-range bs-vert" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px;background:#1A1A2E;border-radius:3px"> |
| 10 | <span class="small fw-semibold" style="color:#00FF41"> |
| 11 | 30 |
| 12 | </span> |
| 13 | <span style="font-size:9px;color:#666;text-transform:uppercase;letter-spacing:.5px"> |
| 14 | CH 1 |
| 15 | </span> |
| 16 | </div> |
| 17 | <div class="d-flex flex-column align-items-center gap-2"> |
| 18 | <input type="range" orient="vertical" min="0" max="100" value="65" class="form-range bs-vert" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px;background:#1A1A2E;border-radius:3px"> |
| 19 | <span class="small fw-semibold" style="color:#00FF41"> |
| 20 | 65 |
| 21 | </span> |
| 22 | <span style="font-size:9px;color:#666;text-transform:uppercase;letter-spacing:.5px"> |
| 23 | CH 2 |
| 24 | </span> |
| 25 | </div> |
| 26 | <div class="d-flex flex-column align-items-center gap-2"> |
| 27 | <input type="range" orient="vertical" min="0" max="100" value="80" class="form-range bs-vert" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px;background:#1A1A2E;border-radius:3px"> |
| 28 | <span class="small fw-semibold" style="color:#00FF41"> |
| 29 | 80 |
| 30 | </span> |
| 31 | <span style="font-size:9px;color:#666;text-transform:uppercase;letter-spacing:.5px"> |
| 32 | CH 3 |
| 33 | </span> |
| 34 | </div> |
| 35 | <div class="d-flex flex-column align-items-center gap-2"> |
| 36 | <input type="range" orient="vertical" min="0" max="100" value="45" class="form-range bs-vert" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px;background:#1A1A2E;border-radius:3px"> |
| 37 | <span class="small fw-semibold" style="color:#00FF41"> |
| 38 | 45 |
| 39 | </span> |
| 40 | <span style="font-size:9px;color:#666;text-transform:uppercase;letter-spacing:.5px"> |
| 41 | CH 4 |
| 42 | </span> |
| 43 | </div> |
| 44 | <div class="d-flex flex-column align-items-center gap-2"> |
| 45 | <input type="range" orient="vertical" min="0" max="100" value="90" class="form-range bs-vert" style="writing-mode:vertical-lr;direction:rtl;width:6px;height:140px;background:#1A1A2E;border-radius:3px"> |
| 46 | <span class="small fw-semibold" style="color:#00FF41"> |
| 47 | 90 |
| 48 | </span> |
| 49 | <span style="font-size:9px;color:#666;text-transform:uppercase;letter-spacing:.5px"> |
| 50 | CH 5 |
| 51 | </span> |
| 52 | </div> |
| 53 | </div> |
Labeled Sections
A slider with named zones that highlight as the handle passes through them — useful for settings that have named tiers or thresholds.
labeled-zones
Live
untitled.html
HTML
| 1 | <div class="zone-demo"> |
| 2 | <div class="zone-header"> |
| 3 | <span class="zone-title"> |
| 4 | Quality Preset |
| 5 | </span> |
| 6 | <span class="zone-name" id="zone-name"> |
| 7 | Balanced |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="zone-track"> |
| 11 | <div class="zone-fill" id="zone-fill"> |
| 12 | </div> |
| 13 | <input type="range" class="zone-slider" id="zone-slider" min="0" max="4" step="1" value="2"/> |
| 14 | <div class="zone-segments"> |
| 15 | <span class="seg" data-zone="Ultra Fast"> |
| 16 | </span> |
| 17 | <span class="seg" data-zone="Fast"> |
| 18 | </span> |
| 19 | <span class="seg active" data-zone="Balanced"> |
| 20 | </span> |
| 21 | <span class="seg" data-zone="Quality"> |
| 22 | </span> |
| 23 | <span class="seg" data-zone="Ultra"> |
| 24 | </span> |
| 25 | </div> |
| 26 | </div> |
| 27 | <div class="zone-labels"> |
| 28 | <span> |
| 29 | Ultra Fast |
| 30 | </span> |
| 31 | <span> |
| 32 | Fast |
| 33 | </span> |
| 34 | <span> |
| 35 | Balanced |
| 36 | </span> |
| 37 | <span> |
| 38 | Quality |
| 39 | </span> |
| 40 | <span> |
| 41 | Ultra |
| 42 | </span> |
| 43 | </div> |
| 44 | </div> |
untitled.css
CSS
| 1 | .zone-demo { |
| 2 | max-width:400px; |
| 3 | margin:16px auto; |
| 4 | padding:24px; |
| 5 | font-family:system-ui, |
| 6 | sans-serif |
| 7 | } |
| 8 | .zone-header { |
| 9 | display:flex; |
| 10 | align-items:center; |
| 11 | justify-content:space-between; |
| 12 | margin-bottom:12px |
| 13 | } |
| 14 | .zone-title { |
| 15 | font-size:12px; |
| 16 | font-weight:600; |
| 17 | color:#E0E0E0 |
| 18 | } |
| 19 | .zone-name { |
| 20 | font-size:12px; |
| 21 | color:#00FF41; |
| 22 | font-weight:600 |
| 23 | } |
| 24 | .zone-track { |
| 25 | position:relative; |
| 26 | padding:8px 0 |
| 27 | } |
| 28 | .zone-slider { |
| 29 | width:100%; |
| 30 | height:8px; |
| 31 | appearance:none; |
| 32 | background:transparent; |
| 33 | border-radius:4px; |
| 34 | outline:none; |
| 35 | cursor:pointer; |
| 36 | position:relative; |
| 37 | z-index:2 |
| 38 | } |
| 39 | .zone-slider::-webkit-slider-thumb { |
| 40 | appearance:none; |
| 41 | width:20px; |
| 42 | height:20px; |
| 43 | border-radius:50%; |
| 44 | background:#00FF41; |
| 45 | cursor:pointer; |
| 46 | border:3px solid #0A0A0A; |
| 47 | box-shadow:0 0 10px rgba(0, |
| 48 | 255, |
| 49 | 65, |
| 50 | .4) |
| 51 | } |
| 52 | .zone-slider::-moz-range-thumb { |
| 53 | width:20px; |
| 54 | height:20px; |
| 55 | border-radius:50%; |
| 56 | background:#00FF41; |
| 57 | cursor:pointer; |
| 58 | border:3px solid #0A0A0A |
| 59 | } |
| 60 | .zone-segments { |
| 61 | position:absolute; |
| 62 | top:50%; |
| 63 | left:0; |
| 64 | right:0; |
| 65 | display:flex; |
| 66 | transform:translateY(-50%); |
| 67 | z-index:1; |
| 68 | gap:3px; |
| 69 | padding:0 8px |
| 70 | } |
| 71 | .seg { |
| 72 | flex:1; |
| 73 | height:8px; |
| 74 | border-radius:4px; |
| 75 | background:#1A1A2E; |
| 76 | transition:all .3s |
| 77 | } |
| 78 | .seg.active { |
| 79 | background:#00FF41; |
| 80 | box-shadow:0 0 8px rgba(0, |
| 81 | 255, |
| 82 | 65, |
| 83 | .3) |
| 84 | } |
| 85 | .zone-labels { |
| 86 | display:flex; |
| 87 | justify-content:space-between; |
| 88 | margin-top:8px; |
| 89 | font-size:9px; |
| 90 | color:#555; |
| 91 | text-transform:uppercase; |
| 92 | letter-spacing:.3px |
| 93 | } |
untitled.js
JavaScript
| 1 | const names=['Ultra Fast','Fast','Balanced','Quality','Ultra'];const slider=document.getElementById('zone-slider');const nameEl=document.getElementById('zone-name');const segs=document.querySelectorAll('.seg');function updateZone(){const i=parseInt(slider.value);nameEl.textContent=names[i];segs.forEach((s,j)=>s.classList.toggle('active',j<=i));const pct=(i/4)*100;slider.style.background='linear-gradient(90deg,rgba(0,255,65,.2) '+pct+'%,transparent '+pct+'%)'}slider.addEventListener('input',updateZone);updateZone() |
untitled.html
HTML
| 1 | <div class="max-w-md mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex justify-between items-center mb-3"> |
| 3 | <span class="text-xs font-semibold text-[#E0E0E0]"> |
| 4 | Quality Preset |
| 5 | </span> |
| 6 | <span id="tw-zone-name" class="text-xs font-semibold text-[#00FF41]"> |
| 7 | Balanced |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="relative py-2"> |
| 11 | <input id="tw-zone" type="range" min="0" max="4" step="1" value="2" class="w-full h-2 appearance-none bg-transparent rounded cursor-pointer accent-[#00FF41] relative z-10"> |
| 12 | <div id="tw-segs" class="absolute top-1/2 left-0 right-0 -translate-y-1/2 flex gap-1 px-2 z-0"> |
| 13 | <span class="flex-1 h-2 rounded bg-[#1A1A2E]"> |
| 14 | </span> |
| 15 | <span class="flex-1 h-2 rounded bg-[#1A1A2E]"> |
| 16 | </span> |
| 17 | <span class="flex-1 h-2 rounded bg-[#1A1A2E]"> |
| 18 | </span> |
| 19 | <span class="flex-1 h-2 rounded bg-[#1A1A2E]"> |
| 20 | </span> |
| 21 | <span class="flex-1 h-2 rounded bg-[#1A1A2E]"> |
| 22 | </span> |
| 23 | </div> |
| 24 | </div> |
| 25 | <div class="flex justify-between mt-2 text-[9px] text-[#555] uppercase tracking-wide"> |
| 26 | <span> |
| 27 | Ultra Fast |
| 28 | </span> |
| 29 | <span> |
| 30 | Fast |
| 31 | </span> |
| 32 | <span> |
| 33 | Balanced |
| 34 | </span> |
| 35 | <span> |
| 36 | Quality |
| 37 | </span> |
| 38 | <span> |
| 39 | Ultra |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .bs-zone::-webkit-slider-thumb{background:#00FF41;border:3px solid #0A0A0A;width:20px;height:20px;border-radius:50%;box-shadow:0 0 10px rgba(0,255,65,.4)} |
| 3 | .bs-zone::-moz-range-thumb{background:#00FF41;border:3px solid #0A0A0A;width:20px;height:20px;border-radius:50%} |
| 4 | .bs-zone::-webkit-slider-runnable-track{background:transparent;height:8px;border-radius:4px} |
| 5 | .bs-zone::-moz-range-track{background:transparent;height:8px;border-radius:4px} |
| 6 | </style> |
| 7 | <div class="w-100" style="max-width:400px"> |
| 8 | <div class="d-flex justify-content-between align-items-center mb-2"> |
| 9 | <span class="small fw-semibold" style="color:#E0E0E0"> |
| 10 | Quality Preset |
| 11 | </span> |
| 12 | <span id="bs-zone-name" class="small fw-semibold" style="color:#00FF41"> |
| 13 | Balanced |
| 14 | </span> |
| 15 | </div> |
| 16 | <div class="position-relative py-2"> |
| 17 | <input id="bs-zone" type="range" class="form-range bs-zone position-relative" min="0" max="4" step="1" value="2" style="z-index:2"> |
| 18 | <div id="bs-segs" class="position-absolute top-50 start-0 end-0 d-flex gap-1 px-2" style="transform:translateY(-50%);z-index:1"> |
| 19 | <span class="flex-fill rounded" style="height:8px;background:#1A1A2E"> |
| 20 | </span> |
| 21 | <span class="flex-fill rounded" style="height:8px;background:#1A1A2E"> |
| 22 | </span> |
| 23 | <span class="flex-fill rounded" style="height:8px;background:#1A1A2E"> |
| 24 | </span> |
| 25 | <span class="flex-fill rounded" style="height:8px;background:#1A1A2E"> |
| 26 | </span> |
| 27 | <span class="flex-fill rounded" style="height:8px;background:#1A1A2E"> |
| 28 | </span> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="d-flex justify-content-between mt-2" style="font-size:9px;color:#555;text-transform:uppercase;letter-spacing:.3px"> |
| 32 | <span> |
| 33 | Ultra Fast |
| 34 | </span> |
| 35 | <span> |
| 36 | Fast |
| 37 | </span> |
| 38 | <span> |
| 39 | Balanced |
| 40 | </span> |
| 41 | <span> |
| 42 | Quality |
| 43 | </span> |
| 44 | <span> |
| 45 | Ultra |
| 46 | </span> |
| 47 | </div> |
| 48 | </div> |
Disabled & Readonly
Sliders in disabled and read-only states. Disabled prevents all interaction and dims the control; readonly preserves the value but blocks user changes.
disabled-states
Live
untitled.html
HTML
| 1 | <div class="disabled-demo"> |
| 2 | <div class="d-field"> |
| 3 | <label> |
| 4 | Active Slider |
| 5 | </label> |
| 6 | <input type="range" class="d-slider" id="d-active" min="0" max="100" value="60"/> |
| 7 | <span class="d-val" id="d-active-val"> |
| 8 | 60 |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="d-field"> |
| 12 | <label> |
| 13 | Disabled Slider |
| 14 | </label> |
| 15 | <input type="range" class="d-slider disabled" min="0" max="100" value="40" disabled/> |
| 16 | <span class="d-val dim"> |
| 17 | 40 |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="d-field"> |
| 21 | <label> |
| 22 | Readonly Slider |
| 23 | </label> |
| 24 | <input type="range" class="d-slider readonly" min="0" max="100" value="75" readonly/> |
| 25 | <span class="d-val"> |
| 26 | 75 |
| 27 | </span> |
| 28 | </div> |
| 29 | </div> |
untitled.css
CSS
| 1 | .disabled-demo { |
| 2 | max-width:360px; |
| 3 | margin:16px auto; |
| 4 | display:flex; |
| 5 | flex-direction:column; |
| 6 | gap:20px; |
| 7 | padding:24px; |
| 8 | font-family:system-ui, |
| 9 | sans-serif |
| 10 | } |
| 11 | .d-field { |
| 12 | display:flex; |
| 13 | flex-direction:column; |
| 14 | gap:6px |
| 15 | } |
| 16 | .d-field label { |
| 17 | font-size:11px; |
| 18 | font-weight:600; |
| 19 | color:#808080; |
| 20 | text-transform:uppercase; |
| 21 | letter-spacing:.5px |
| 22 | } |
| 23 | .d-slider { |
| 24 | width:100%; |
| 25 | height:6px; |
| 26 | border-radius:3px; |
| 27 | appearance:none; |
| 28 | background:#2A2A3E; |
| 29 | outline:none; |
| 30 | cursor:pointer |
| 31 | } |
| 32 | .d-slider::-webkit-slider-thumb { |
| 33 | appearance:none; |
| 34 | width:16px; |
| 35 | height:16px; |
| 36 | border-radius:50%; |
| 37 | background:#00FF41; |
| 38 | cursor:pointer; |
| 39 | border:2px solid #0A0A0A |
| 40 | } |
| 41 | .d-slider::-moz-range-thumb { |
| 42 | width:16px; |
| 43 | height:16px; |
| 44 | border-radius:50%; |
| 45 | background:#00FF41; |
| 46 | cursor:pointer; |
| 47 | border:2px solid #0A0A0A |
| 48 | } |
| 49 | .d-slider.disabled { |
| 50 | opacity:.35; |
| 51 | cursor:not-allowed |
| 52 | } |
| 53 | .d-slider.disabled::-webkit-slider-thumb { |
| 54 | background:#555; |
| 55 | cursor:not-allowed |
| 56 | } |
| 57 | .d-slider.readonly { |
| 58 | cursor:not-allowed |
| 59 | } |
| 60 | .d-val { |
| 61 | font-size:11px; |
| 62 | color:#00FF41; |
| 63 | font-weight:600; |
| 64 | font-variant-numeric:tabular-nums |
| 65 | } |
| 66 | .d-val.dim { |
| 67 | color:#555 |
| 68 | } |
untitled.js
JavaScript
| 1 | const active=document.getElementById('d-active');active.addEventListener('input',()=>{document.getElementById('d-active-val').textContent=active.value}) |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto p-6 bg-[#0A0A0A] space-y-5"> |
| 2 | <div class="space-y-1.5"> |
| 3 | <label class="text-[11px] font-semibold text-[#808080] uppercase tracking-wider"> |
| 4 | Active Slider |
| 5 | </label> |
| 6 | <input id="tw-d-active" type="range" min="0" max="100" value="60" class="w-full h-1.5 rounded-lg appearance-none cursor-pointer accent-[#00FF41] bg-[#2A2A3E]"> |
| 7 | <div id="tw-d-active-val" class="text-[11px] font-semibold text-[#00FF41] tabular-nums"> |
| 8 | 60 |
| 9 | </div> |
| 10 | </div> |
| 11 | <div class="space-y-1.5"> |
| 12 | <label class="text-[11px] font-semibold text-[#808080] uppercase tracking-wider"> |
| 13 | Disabled Slider |
| 14 | </label> |
| 15 | <input type="range" min="0" max="100" value="40" disabled class="w-full h-1.5 rounded-lg appearance-none cursor-not-allowed accent-[#555555] bg-[#2A2A3E] opacity-40"> |
| 16 | <div class="text-[11px] font-semibold text-[#555555] tabular-nums"> |
| 17 | 40 |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="space-y-1.5"> |
| 21 | <label class="text-[11px] font-semibold text-[#808080] uppercase tracking-wider"> |
| 22 | Readonly Slider |
| 23 | </label> |
| 24 | <input type="range" min="0" max="100" value="75" readonly class="w-full h-1.5 rounded-lg appearance-none cursor-not-allowed accent-[#00FF41] bg-[#2A2A3E]"> |
| 25 | <div class="text-[11px] font-semibold text-[#00FF41] tabular-nums"> |
| 26 | 75 |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .bs-disabled::-webkit-slider-thumb{background:#555;border:2px solid #0A0A0A;width:16px;height:16px;border-radius:50%} |
| 3 | .bs-disabled::-moz-range-thumb{background:#555;border:2px solid #0A0A0A;width:16px;height:16px;border-radius:50%} |
| 4 | .bs-active::-webkit-slider-thumb{background:#00FF41;border:2px solid #0A0A0A;width:16px;height:16px;border-radius:50%} |
| 5 | .bs-active::-moz-range-thumb{background:#00FF41;border:2px solid #0A0A0A;width:16px;height:16px;border-radius:50%} |
| 6 | .bs-range::-webkit-slider-runnable-track{background:#2A2A3E;height:6px;border-radius:3px} |
| 7 | .bs-range::-moz-range-track{background:#2A2A3E;height:6px;border-radius:3px} |
| 8 | </style> |
| 9 | <div class="w-100" style="max-width:360px"> |
| 10 | <div class="mb-3"> |
| 11 | <label class="form-label mb-1 small fw-semibold" style="color:#808080"> |
| 12 | ACTIVE SLIDER |
| 13 | </label> |
| 14 | <input id="bs-d-active" type="range" class="form-range bs-range bs-active" min="0" max="100" value="60"> |
| 15 | <div id="bs-d-active-val" class="small fw-semibold" style="color:#00FF41"> |
| 16 | 60 |
| 17 | </div> |
| 18 | </div> |
| 19 | <div class="mb-3"> |
| 20 | <label class="form-label mb-1 small fw-semibold" style="color:#808080"> |
| 21 | DISABLED SLIDER |
| 22 | </label> |
| 23 | <input type="range" class="form-range bs-range bs-disabled" min="0" max="100" value="40" disabled style="opacity:.35;cursor:not-allowed"> |
| 24 | <div class="small fw-semibold" style="color:#555"> |
| 25 | 40 |
| 26 | </div> |
| 27 | </div> |
| 28 | <div> |
| 29 | <label class="form-label mb-1 small fw-semibold" style="color:#808080"> |
| 30 | READONLY SLIDER |
| 31 | </label> |
| 32 | <input type="range" class="form-range bs-range bs-active" min="0" max="100" value="75" readonly style="cursor:not-allowed"> |
| 33 | <div class="small fw-semibold" style="color:#00FF41"> |
| 34 | 75 |
| 35 | </div> |
| 36 | </div> |
| 37 | </div> |
Slider with Tooltip
A slider with a floating tooltip that follows the thumb and displays the current value.
slider-tooltip
Live
untitled.html
HTML
| 1 | <div class="tip-demo"> |
| 2 | <div class="tip-group"> |
| 3 | <div class="tip-wrap"> |
| 4 | <div class="tip-bubble" id="tip-bubble"> |
| 5 | 50 |
| 6 | </div> |
| 7 | <input type="range" class="tip-slider" id="tip-slider" min="0" max="100" value="50"/> |
| 8 | </div> |
| 9 | <div class="tip-labels"> |
| 10 | <span> |
| 11 | 0 |
| 12 | </span> |
| 13 | <span> |
| 14 | 100 |
| 15 | </span> |
| 16 | </div> |
| 17 | </div> |
| 18 | </div> |
untitled.css
CSS
| 1 | .tip-demo { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | align-items:center; |
| 5 | padding:32px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif |
| 8 | } |
| 9 | .tip-group { |
| 10 | width:100%; |
| 11 | max-width:300px |
| 12 | } |
| 13 | .tip-wrap { |
| 14 | position:relative; |
| 15 | padding-top:28px |
| 16 | } |
| 17 | .tip-bubble { |
| 18 | position:absolute; |
| 19 | top:0; |
| 20 | left:50%; |
| 21 | transform:translateX(-50%); |
| 22 | background:#00FF41; |
| 23 | color:#0A0A0A; |
| 24 | padding:3px 8px; |
| 25 | border-radius:4px; |
| 26 | font-size:11px; |
| 27 | font-weight:700; |
| 28 | font-variant-numeric:tabular-nums; |
| 29 | opacity:0; |
| 30 | transition:opacity .15s; |
| 31 | pointer-events:none; |
| 32 | white-space:nowrap |
| 33 | } |
| 34 | .tip-bubble::after { |
| 35 | content:''; |
| 36 | position:absolute; |
| 37 | top:100%; |
| 38 | left:50%; |
| 39 | transform:translateX(-50%); |
| 40 | border:4px solid transparent; |
| 41 | border-top-color:#00FF41 |
| 42 | } |
| 43 | .tip-wrap:hover .tip-bubble, |
| 44 | .tip-slider:active ~ .tip-bubble { |
| 45 | opacity:1 |
| 46 | } |
| 47 | .tip-slider { |
| 48 | width:100%; |
| 49 | height:6px; |
| 50 | border-radius:3px; |
| 51 | appearance:none; |
| 52 | background:linear-gradient(90deg, |
| 53 | #00FF41 50%, |
| 54 | #2A2A3E 50%); |
| 55 | outline:none; |
| 56 | cursor:pointer |
| 57 | } |
| 58 | .tip-slider::-webkit-slider-thumb { |
| 59 | appearance:none; |
| 60 | width:18px; |
| 61 | height:18px; |
| 62 | border-radius:50%; |
| 63 | background:#00FF41; |
| 64 | cursor:pointer; |
| 65 | border:2px solid #0A0A0A; |
| 66 | box-shadow:0 0 8px rgba(0, |
| 67 | 255, |
| 68 | 65, |
| 69 | .3) |
| 70 | } |
| 71 | .tip-slider::-moz-range-thumb { |
| 72 | width:18px; |
| 73 | height:18px; |
| 74 | border-radius:50%; |
| 75 | background:#00FF41; |
| 76 | cursor:pointer; |
| 77 | border:2px solid #0A0A0A |
| 78 | } |
| 79 | .tip-labels { |
| 80 | display:flex; |
| 81 | justify-content:space-between; |
| 82 | margin-top:8px; |
| 83 | font-size:10px; |
| 84 | color:#666 |
| 85 | } |
untitled.js
JavaScript
| 1 | const slider=document.getElementById('tip-slider');const bubble=document.getElementById('tip-bubble');function updateTooltip(){const pct=(slider.value-slider.min)/(slider.max-slider.min)*100;bubble.textContent=slider.value;bubble.style.left=pct+'%';const grad='linear-gradient(90deg,#00FF41 '+pct+'%,#2A2A3E '+pct+'%)';slider.style.background=grad;bubble.style.opacity='1'}slider.addEventListener('input',updateTooltip);slider.addEventListener('mousedown',()=>bubble.style.opacity='1');slider.addEventListener('mouseup',()=>bubble.style.opacity='0');slider.addEventListener('blur',()=>bubble.style.opacity='0');slider.addEventListener('focus',()=>bubble.style.opacity='1');updateTooltip() |
untitled.html
HTML
| 1 | <div class="w-full max-w-xs mx-auto p-8 bg-[#0A0A0A]"> |
| 2 | <div class="relative pt-7"> |
| 3 | <div id="tw-tip" class="absolute top-0 left-1/2 -translate-x-1/2 bg-[#00FF41] text-[#0A0A0A] px-2 py-0.5 rounded text-[11px] font-bold tabular-nums opacity-0 transition-opacity pointer-events-none whitespace-nowrap" style="left:50%"> |
| 4 | 50 |
| 5 | </div> |
| 6 | <input id="tw-tip-slider" type="range" min="0" max="100" value="50" class="w-full h-1.5 rounded-lg appearance-none cursor-pointer accent-[#00FF41]" style="background:linear-gradient(90deg,#00FF41 50%,#2A2A3E 50%)"> |
| 7 | </div> |
| 8 | <div class="flex justify-between mt-2 text-[10px] text-[#666]"> |
| 9 | <span> |
| 10 | 0 |
| 11 | </span> |
| 12 | <span> |
| 13 | 100 |
| 14 | </span> |
| 15 | </div> |
| 16 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .bs-tip::-webkit-slider-thumb{background:#00FF41;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 3 | .bs-tip::-moz-range-thumb{background:#00FF41;border:2px solid #0A0A0A;width:18px;height:18px;border-radius:50%} |
| 4 | .bs-tip::-webkit-slider-runnable-track{background:transparent;height:6px;border-radius:3px} |
| 5 | .bs-tip::-moz-range-track{background:transparent;height:6px;border-radius:3px} |
| 6 | </style> |
| 7 | <div class="w-100" style="max-width:300px"> |
| 8 | <div class="position-relative pt-4"> |
| 9 | <div id="bs-tip" class="position-absolute top-0 start-50 translate-middle-x bg-success text-dark px-2 py-1 rounded small fw-bold" style="background:#00FF41;color:#0A0A0A;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .15s;left:50%"> |
| 10 | 50 |
| 11 | </div> |
| 12 | <input id="bs-tip-slider" type="range" class="form-range bs-tip" min="0" max="100" value="50"> |
| 13 | </div> |
| 14 | <div class="d-flex justify-content-between mt-2" style="font-size:10px;color:#666"> |
| 15 | <span> |
| 16 | 0 |
| 17 | </span> |
| 18 | <span> |
| 19 | 100 |
| 20 | </span> |
| 21 | </div> |
| 22 | </div> |
CSS Pseudo-Elements Reference
The range input exposes several pseudo-elements for styling. WebKit and Mozilla use different naming conventions, so target both for cross-browser compatibility.
slider-pseudo-elements.css
CSS
| 1 | /* WebKit (Chrome, Safari, Edge) */ |
| 2 | input[type="range"]::-webkit-slider-runnable-track { |
| 3 | height: 6px; |
| 4 | background: #2A2A3E; |
| 5 | border-radius: 3px; |
| 6 | } |
| 7 | |
| 8 | input[type="range"]::-webkit-slider-thumb { |
| 9 | appearance: none; |
| 10 | width: 18px; |
| 11 | height: 18px; |
| 12 | border-radius: 50%; |
| 13 | background: #00FF41; |
| 14 | margin-top: -6px; /* center on track */ |
| 15 | } |
| 16 | |
| 17 | /* Mozilla (Firefox) */ |
| 18 | input[type="range"]::-moz-range-track { |
| 19 | height: 6px; |
| 20 | background: #2A2A3E; |
| 21 | border-radius: 3px; |
| 22 | } |
| 23 | |
| 24 | input[type="range"]::-moz-range-thumb { |
| 25 | width: 18px; |
| 26 | height: 18px; |
| 27 | border-radius: 50%; |
| 28 | background: #00FF41; |
| 29 | border: none; |
| 30 | } |
HTML Structure
The range input follows a semantic pattern: a <label> connected via for, the <input type="range"> with min/max/step/value attributes, and an aria live region for the current value.
slider-structure.html
HTML
| 1 | <label for="volume">Volume</label> |
| 2 | |
| 3 | <input type="range" |
| 4 | id="volume" |
| 5 | min="0" max="100" |
| 6 | value="50" step="1" |
| 7 | aria-valuenow="50" |
| 8 | aria-valuemin="0" |
| 9 | aria-valuemax="100" /> |
| 10 | |
| 11 | <span aria-live="polite">50</span> |
Accessibility
Sliders must be operable with a keyboard, announce their value to screen readers, and remain visible across states.
- Use a real <input type="range"> instead of a custom div so keyboard and ARIA support come for free.
- Connect every slider to a visible <label> with htmlFor or wrap the input in a label.
- Provide a live value display with aria-live="polite" so changes are announced without interrupting the user.
- Ensure the thumb is at least 44×44 px on touch devices; increase padding or thumb size if needed.
- Keep focus indicators visible — avoid removing outlines without replacing them with a high-contrast ring or box-shadow.
- For disabled sliders, use the disabled attribute and keep the label readable; do not rely on color alone.
Best Practices
ℹ
info
Always pair a range input with a visible value display. Users need precise feedback — the slider thumb alone is not enough to communicate the exact value. A tooltip or numeric readout works best.
⚠
warning
Custom-styled sliders require separate pseudo-element rules for -webkit- and -moz- prefixes. Test on both Chrome and Firefox to ensure consistent appearance across browsers.
✓
best practice
Use the step attribute for discrete values (e.g., quality presets, zoom levels). For continuous values like volume or brightness, omit step or set it to 1 for smooth movement.
- Always include aria-valuemin, aria-valuemax, and aria-valuenow for screen readers. The browser updates aria-valuenow automatically, but custom displays need manual updates.
- Use aria-live="polite" on the value display so assistive technologies announce changes without interrupting the current task.
- Minimum touch target for slider thumbs should be 44×44px on mobile — increase thumb size or add invisible padding to meet WCAG touch target requirements.
- For dual-handle range sliders, ensure handles cannot cross each other to maintain logical min/max ordering. Clamp values on the input event.
- Consider providing a number input alongside the slider for users who need precise values. Sync both inputs bidirectionally.
- Use font-variant-numeric: tabular-nums on value displays to prevent layout shifts as digits change width.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.