A single-value slider, then a dual-thumb price range with a price histogram above it (Airbnb / Booking pattern). Custom-styled native inputs.
A range slider lets users pick a number on a continuous scale by dragging a thumb. Single-thumb for one value (volume, font size); dual-thumb for a min/max range (price filters, date ranges). The browser's native <input type="range"> handles all the keyboard + touch + accessibility — your job is just to dress it up.
Single slider: style the track with a linear-gradient that uses a CSS custom property for the fill stop position, updated from the input's value on every change. Style the thumb with vendor pseudo-elements (::-webkit-slider-thumb, ::-moz-range-thumb). Dual slider: overlay two transparent input ranges in the same space, with pointer-events: none on the inputs but pointer-events: auto on the thumbs — so users can grab either. Render the colored "fill" between thumbs as a separate div whose left/right are set from the two values.
Build TWO range sliders inside cards: SINGLE: a native <input type="range"> styled with -webkit-appearance:none. The track is 8px tall, border-radius:999px, with background: linear-gradient(90deg, accent 0%, accent var(--p), rgba(255,255,255,0.08) var(--p), rgba(255,255,255,0.08) 100%) — update --p custom property from value on every input event. Thumb (::-webkit-slider-thumb AND ::-moz-range-thumb): 24px white circle with 4px accent border, drop shadow, scale-up on :hover and grab cursor. Show current value above as a big display-serif tabular-nums number with italic accent unit. Show tick labels below.
DUAL: a price-range slider with two thumbs. Container position:relative, 24px tall. Track div absolutely positioned (6px tall gray). A FILL div sits between the two thumb values — its left and right inset are calculated from min and max value percentages. Two transparent input[type=range] elements overlap inside the container with pointer-events:none on the inputs themselves but pointer-events:auto on their thumbs — so users can grab either thumb. On input of either, ensure min <= max (swap or clamp), update the fill div's left/right, and update the displayed values. Add a histogram of 20 bars ABOVE the slider — each bar's height is a fixed random value, but bars whose price falls inside the selected range get the accent gradient, others stay muted — the histogram updates live as the user drags. Airbnb price-filter pattern.