Slider

Slider picks a value from a range by dragging a thumb. It is a native range input with a drawn track and thumb, and an optional init() module for the filled track and live readout.

Public web API

A data-bitsy-slider root with a label and a native <input type="range">.

<div data-bitsy-slider>
  <label for="volume">Volume <output data-bitsy-slider-value for="volume">60</output></label>
  <input id="volume" name="volume" type="range" min="0" max="100" value="60">
</div>

<script type="module">
  import { init } from "@bitsyui/bits/slider/init";
  init();
</script>

Put an <output data-bitsy-slider-value for="…"> in the label for a live readout.
data-bitsy-slider-ticks is a plain list under the track; data-bitsy-slider-description is help text.
Use aria-valuetext when the number alone is unclear.

Try it

Drag the thumb, or use the arrow, Page Up and Down, Home, and End keys.

Volume 60

Zoom

Changes the size of the canvas.

Opacity

Behavior

Keys and dragging are native. Without the script the value still changes, but Chrome and Safari show no fill and the readout stays still.
init() sets --bitsy-slider-fill on the input and copies the value into the readout on every input event. It marks each slider with data-bitsy-slider-ready and returns a cleanup function.

Foundation versus Bit

The foundation leaves <input type="range"> to the browser. data-bitsy-slider draws the track, fill, thumb, and focus ring, all from --bitsy-slider-* hooks.