Slider
The track with a knob you drag to choose a value, like volume, brightness, zoom, or a price limit.
See it
What it is
A slider is a track with a draggable thumb that selects one value between a minimum and maximum. Volume, brightness, zoom, and rough price limits are familiar examples. On the web, the native building block is 'input type="range"', with min, max, and step defining the allowed values.
Reach for one when people benefit from seeing and adjusting a value relative to its range, especially when an approximate choice is good enough. Use a number input or pair the slider with one when someone must enter an exact value. A two-thumb range slider is useful for choosing both ends of an interval, such as a price range.
Gotcha: a thumb does not explain its current value by itself. Keep a visible label and live value beside it, preserve arrow-key control, and make the hit target larger than the painted thumb. Avoid tiny steps across a huge range, which turns both dragging and keyboard input into a chore.
Ask AI for it
Build a labelled value slider with native 'input type="range"', min='0', max='100', and step='1'. Show the current numeric value in an output element linked with the for attribute, keep native arrow, Page Up, Page Down, Home, and End keyboard behavior, and use CSS accent-color for the active track. Make the visual thumb 20px with at least a 44px pointer target, add visible min and max labels, and keep a strong :focus-visible ring. Update continuously on the input event.