cnc-slider
A single-thumb slider for one value on a scale, with step snapping, six colour kinds, a hover
chip, an optional legend, and a form-ready hidden input. It is the one-handed sibling of
cnc-range
and shares its bounds handling.
Quick start
Set the scale with min and max and the starting point with
value. Dragging emits change.
<div x-data="{ level: 40 }">
<cnc-slider
name="basic"
min="0"
max="100"
step="1"
$value="level"
></cnc-slider>
</div>Usage guidance
Use a slider when the value is approximate and the reader gains something from seeing where it
sits on the scale — volume, opacity, a weighting. Prefer a number input when an exact
figure matters or the scale is wide enough that one pixel of track spans a meaningful amount,
and cnc-range when both ends of a span are being chosen. Keep step
coarse enough that every stop is reachable by hand.