C&C Docs
Log in

cnc-range

A dual-thumb slider for a from/to range, with step snapping, six colour kinds, an optional legend, form-ready hidden inputs, and bounds that clamp stored values back into range rather than rendering them off the track.

Quick start

Set the bounds with min and max, the initial selection with from and to. Dragging either thumb emits change carrying both ends.

20
80
0 20 80 100
20 – 80 
<div x-data="{ from: 20, to: 80 }">
  <cnc-range
    name="basic"
    min="0"
    max="100"
    from="20"
    to="80"
    step="1"
    @change="from = $event.detail.from; to = $event.detail.to"
  ></cnc-range>
</div>

Usage guidance

Use a range when both ends of a span are meaningful and approximate — a price bracket, an age band, a score window. Prefer two number inputs when the reader needs to type an exact figure or the scale is wide enough that a pixel of track spans a meaningful amount, and cnc-slider when only one value is being chosen. Keep step coarse enough that every stop is reachable: on a long scale a step of one makes precise values a matter of luck.

← Back to Widgets