Range selection
Add range and end-value for two thumbs. Both values submit under the same name; read them with FormData.getAll(name). Thumbs can meet but cannot cross.
Use ticks for stops, min-label and max-label for bounds, and value prefixes or suffixes for units. Labels do not change the numeric value. For exact, unbounded values, use Input.
API reference: <cad-slider>
disableddisabledbooleanfalseend-valueendValuenumber75hinthintstring''labellabelstring''maxmaxnumber100max-labelmaxLabelstring''minminnumber0min-labelminLabelstring''namenamestring''rangerangebooleanfalseshow-valueshowValuebooleanfalsestepstepnumber1ticksticksstring''tonetoneCadSliderTone'blue'valuevaluenumber50value-prefixvaluePrefixstring''value-suffixvalueSuffixstring''disabledbooleandisabledyesendValuenumberend-valueyeshintstringhintnolabelstringlabelnomaxnumbermaxyesmaxLabelstringmax-labelnominnumberminyesminLabelstringmin-labelnonamestringnameyesrangebooleanrangeyesshowValuebooleanshow-valueyesstepnumberstepyesticksstringticksnotoneCadSliderTonetoneyesvaluenumbervalueyesvaluePrefixstringvalue-prefixnovalueSuffixstringvalue-suffixnoinputEventFired while a value changes.cad-slider-inputCustomEventFired while a value changes with both range values.changeEventFired when a value is committed.cad-slider-changeCustomEventFired when a value is committed with both range values.labelVisible slider label. Falls back to the `label` attribute.hintSupporting context. Falls back to the `hint` attribute.active-trackSelected portion of the track.baseSlider layout.controlNative range input.hintSupporting description.labelVisible label.thumbDraggable thumb.tickOne visible scale marker.trackHand-drawn slider track.valueVisible value bubble.--cad-slider-accentSelected track, thumb, and focus color.--cad-slider-trackUnselected track color.Accessibility
Each thumb uses native input type="range". Arrows move one step; Shift + Arrow moves ten. Home and End reach the bounds. In range mode, the controls are named minimum and maximum.