One value or an ordered pair of values, each owned by its native range input. Use cem-field for precise text entry and cem-timepicker for time choices.
Full examples and variation matrix · Property playground · Automated stories
Tab to each thumb. Use Arrow keys, Home/End and PageUp/PageDown, or drag its native thumb. A range cannot cross. Hover and focus change paint without changing values.
{slice @name=min | 0}
{cem-field @label="min" @value="{$datadom.slices.min}" @slice=min @slice-event=input @slice-value="$target.value"}
{slice @name=max | 100}
{cem-field @label="max" @value="{$datadom.slices.max}" @slice=max @slice-event=input @slice-value="$target.value"}
{slice @name=step | 5}
{cem-field @label="step" @value="{$datadom.slices.step}" @slice=step @slice-event=input @slice-value="$target.value"}
{slice @name=label | Volume}
{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=value | 50}
{cem-field @label="value" @value="{$datadom.slices.value}" @slice=value @slice-event=input @slice-value="$target.value"}
{slice @name=name | volume}
{cem-field @label="name" @value="{$datadom.slices.name}" @slice=name @slice-event=input @slice-value="$target.value"}
{slice @name=end-label | Maximum volume}
{cem-field @label="end-label" @value="{$datadom.slices.end-label}" @slice=end-label @slice-event=input @slice-value="$target.value"}
{slice @name=end-value | 75}
{cem-field @label="end-value" @value="{$datadom.slices.end-value}" @slice=end-value @slice-event=input @slice-value="$target.value"}
{slice @name=end-name | maximum}
{cem-field @label="end-name" @value="{$datadom.slices.end-name}" @slice=end-name @slice-event=input @slice-value="$target.value"}
{slice @name=aria-valuetext | }
{cem-field @label="aria-valuetext" @value="{$datadom.slices.aria-valuetext}" @slice=aria-valuetext @slice-event=input @slice-value="$target.value"}
{slice @name=form | }
{cem-field @label="form" @value="{$datadom.slices.form}" @slice=form @slice-event=input @slice-value="$target.value"}
{slice @name=class | }
{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{slice @name=dir | ltr}
{fieldset @role=group @aria-label="dir" @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="property-dir" @value="ltr" @label="ltr" @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name="property-dir" @value="rtl" @label="rtl" @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{slice @name=disabled | absent}
{fieldset @role=group @aria-label="disabled" @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{cem-radio @name="property-disabled" @value="absent" @label="absent" @checked={if datadom.slices.disabled == "absent" {true} else {null}}}{cem-radio @name="property-disabled" @value="present" @label="present" @checked={if datadom.slices.disabled == "present" {true} else {null}}}}
{slice @name=discrete | absent}
{fieldset @role=group @aria-label="discrete" @slice=discrete @slice-event=change @slice-value="$target.value" | {legend | discrete}{cem-radio @name="property-discrete" @value="absent" @label="absent" @checked={if datadom.slices.discrete == "absent" {true} else {null}}}{cem-radio @name="property-discrete" @value="present" @label="present" @checked={if datadom.slices.discrete == "present" {true} else {null}}}}
{slice @name=show-tick-marks | absent}
{fieldset @role=group @aria-label="show-tick-marks" @slice=show-tick-marks @slice-event=change @slice-value="$target.value" | {legend | show-tick-marks}{cem-radio @name="property-show-tick-marks" @value="absent" @label="absent" @checked={if datadom.slices.show-tick-marks == "absent" {true} else {null}}}{cem-radio @name="property-show-tick-marks" @value="present" @label="present" @checked={if datadom.slices.show-tick-marks == "present" {true} else {null}}}}
{slice @name=hidden | absent}
{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="property-hidden" @value="absent" @label="absent" @checked={if datadom.slices.hidden == "absent" {true} else {null}}}{cem-radio @name="property-hidden" @value="present" @label="present" @checked={if datadom.slices.hidden == "present" {true} else {null}}}}
{slice @name=mode | single}
{fieldset @role=group @aria-label="mode" @slice=mode @slice-event=change @slice-value="$target.value" | {legend | mode}{cem-radio @name="property-mode" @value="single" @label="single" @checked={if datadom.slices.mode == "single" {true} else {null}}}{cem-radio @name="property-mode" @value="range" @label="range" @checked={if datadom.slices.mode == "range" {true} else {null}}}}
{form | {cem-slider @min="{$datadom.slices.min}" @max="{$datadom.slices.max}" @step="{$datadom.slices.step}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @disabled={if datadom.slices.disabled == "present" {true} else {null}} @discrete={if datadom.slices.discrete == "present" {true} else {null}} @show-tick-marks={if datadom.slices.show-tick-marks == "present" {true} else {null}} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {input @slot={if datadom.slices.mode == "range" {"start"} else {"single"}} @type=range @aria-label="{$datadom.slices.label}" @aria-valuetext={if datadom.slices.aria-valuetext {datadom.slices.aria-valuetext} else {null}} @name="{$datadom.slices.name}" @form={if datadom.slices.form {datadom.slices.form} else {null}} | {attribute @name=value @value={datadom.slices.value}}}
{cem:if @test='datadom.slices.mode == "range"' | {input @slot=end @type=range @aria-label="{$datadom.slices.end-label}" @name="{$datadom.slices.end-name}" @form={if datadom.slices.form {datadom.slices.form} else {null}} | {attribute @name=value @value={datadom.slices.end-value}}}}}{cem-action @type=reset @label="Reset values"}}
{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-slider/cem-slider.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href="{$datadom.slices.sourceUrl}" | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}}