Components
Slider
Styled native range input element with keyboard navigation.
The slider restyles native <input type="range"> elements. Configure with standard min, max, step, and value attributes.
Default
Loading components…
<input class="max-w-xl" type="range" min="0" max="100" step="10" value="50" aria-label="Volume" />/** * slider.css — Range input (input[type="range"]) * * @layer reset * @requires layers.css, _variables.css * @uses appearance: none — redraws track + thumb from theme tokens * @tokens --ui-slider-* (track height, background, border, radius; thumb size, bg, border, radius) * * Note: The active region is NOT filled (parity across engines); add a paint * via JS if a filled track is needed. The thumb is centered on the track with a * calc'd negative margin so retuning either size keeps it aligned. */@layer reset { :where(input[type="range"]) { --ui-slider-ring-color: var(--ring-color); --ui-slider-track-height: var(--step-1_5); --ui-slider-track-background: var(--muted); --ui-slider-track-border: 1px solid var(--muted); --ui-slider-track-radius: var(--radius-full); --ui-slider-thumb-size: var(--step-4); --ui-slider-thumb-background: var(--background); --ui-slider-thumb-shadow: var(--shadow-xs); --ui-slider-thumb-border: 1px solid var(--border); --ui-slider-thumb-radius: var(--radius-full); --ui-slider-thumb-offset: calc(var(--ui-slider-track-height) * -1); -webkit-appearance: none; appearance: none; inline-size: 100%; background: transparent; cursor: grab; border-radius: var(--ui-slider-track-radius); /* transparent outline keeps focus visible in forced-colors / high-contrast modes; the visible focus ring lives on the thumb via --shadow-ring */ outline: var(--outline-width) var(--outline-style) transparent; outline-offset: var(--outline-offset); } :where(input[type="range"])::-webkit-slider-runnable-track { block-size: var(--ui-slider-track-height); inline-size: 100%; background: var(--ui-slider-track-background); border: var(--ui-slider-track-border); border-radius: var(--ui-slider-track-radius); } :where(input[type="range"])::-moz-range-track { block-size: var(--ui-slider-track-height); inline-size: 100%; background: var(--ui-slider-track-background); border: var(--ui-slider-track-border); border-radius: var(--ui-slider-track-radius); } :where(input[type="range"])::-webkit-slider-thumb { /* ring renders as box-shadow so it composes with --ui-slider-thumb-shadow; the ring widths animate from 0 so the ring grows in smoothly on focus */ --_ring-offset-width: 0px; --_ring-width: 0px; --_ring: color-mix(in oklch, var(--ui-slider-ring-color) var(--ring-opacity), transparent); box-shadow: 0 0 0 var(--_ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)), var(--ui-slider-thumb-shadow); -webkit-appearance: none; appearance: none; margin-block-start: var(--ui-slider-thumb-offset); inline-size: var(--ui-slider-thumb-size); block-size: var(--ui-slider-thumb-size); background-color: var(--ui-slider-thumb-background); border: var(--ui-slider-thumb-border); border-radius: var(--ui-slider-thumb-radius); transition: var(--default-transition); } :where(input[type="range"])::-moz-range-thumb { /* ring renders as box-shadow so it composes with --ui-slider-thumb-shadow; the ring widths animate from 0 so the ring grows in smoothly on focus */ --_ring-offset-width: 0px; --_ring-width: 0px; --_ring: color-mix(in oklch, var(--ui-slider-ring-color) var(--ring-opacity), transparent); appearance: none; inline-size: var(--ui-slider-thumb-size); block-size: var(--ui-slider-thumb-size); background-color: var(--ui-slider-thumb-background); border: var(--ui-slider-thumb-border); border-radius: var(--ui-slider-thumb-radius); box-shadow: 0 0 0 var(--_ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)), var(--ui-slider-thumb-shadow); transition: var(--default-transition); } :where(input[type="range"]:hover) { --ui-slider-thumb-border: 1px solid var(--primary); } :where(input[type="range"]:active) { --ui-slider-thumb-shadow: var(--shadow-xs), var(--shadow-ring); cursor: grabbing; } :where(input[type="range"]:focus-visible) { --ui-slider-thumb-shadow: var(--shadow-xs), var(--shadow-ring); } :where(input[type="range"]:disabled) { opacity: 0.5; cursor: not-allowed; }}