HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SliderView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA value chosen from a range by dragging.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/slider'import'@fusion.dev/helix-headless/slider'Preview
API ReferenceRoothelix-sliderA value chosen from a range by dragging.
PropTypeDescriptiondefaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.formatOptionsIntl.NumberFormatOptionsIntl.NumberFormat options the value is written with: a currency, a
percent, a unit, or a number of decimals. Written as JSON in the
attribute.formatter(value: number) => stringWrites a value as text, in place of format-options: words for a scale,
or anything Intl.NumberFormat cannot say. A property, since a function
cannot be written in an attribute.hintstringDefault""Help text shown under the control. A validation message replaces it.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.localestringDefault""The locale the value and the words are written in, such as de-DE. Empty
reads the nearest lang, then the browser's language.markerLabelsbooleanDefaultfalseShows the value at each mark.markersnumberDefault0How many marks to draw along the track, evenly spaced, ends included.maxnumberDefault100The largest value that can be chosen. Where it is not a number, such as
max="1OO", the slider stops at 100, as a native range does.maximumLabelstringDefault"maximum"The name of a range's upper thumb, read after the slider's label.minnumberDefault0The smallest value that can be chosen. Where it is not a number, the
slider starts at 0, as a native range does.minimumLabelstringDefault"minimum"The name of a range's lower thumb, read after the slider's label.minStepsBetweenThumbsnumberDefault0How many steps a range's two thumbs stay apart, as Zag's
minStepsBetweenThumbs. A thumb pushed closer stops there.namestringDefault""The name the control's value is submitted under.orientation"horizontal"|"vertical"The direction the track runs. vertical stands it on end.origin"center"|"end"|"start"Where a single thumb's fill starts: start at min, center at the
middle of the track, or end at max. Absent is start. A range fills
between its thumbs and ignores it.pageStepnumberHow far Page Up and Page Down move a thumb, in the slider's own units, as
React Aria's pageSize and Zag's largeStep do. Absent leaves the keys
to the platform, which moves a tenth of the track.rangebooleanDefaultfalseAdds a second thumb, so the value is a pair.rangeTextstringDefault"{start} to {end}"How the readout joins a range's two values, with {start} and {end}
filled in. Write it in the page's language, such as {start} bis {end}.readOnlybooleanDefaultfalseWhether a reader can see and focus the value and cannot change it. A
read-only slider still submits its value.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.showValuebooleanDefaultfalseShows the chosen value beside the track.stepnumberDefault1How far one press of an arrow key moves the thumb. Where it is not a
number, the thumb moves by 1, as on a native range.thumbLabelstringDefault"thumb {index}"The name of a thumb between a range's first and last, read after the
slider's label, with {index} filled in: its place, counted from 1. The
first is minimum-label and the last maximum-label.tooltipbooleanDefaultfalseWhether each thumb shows its value in a bubble beside it, as Web
Awesome's with-tooltip. The styled slider shows the bubbles while the
slider is under the pointer or holds focus. They repeat what each thumb
already reports, so a screen reader skips them.valuestringThe control's current value, which its form submits.valueMissingMessagestringThe message shown when the field is required and empty.valueTextstringDefault""What a screen reader says for a thumb's value, with {value} filled in,
such as {value} degrees. Empty announces the number alone.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.valueAsNumbernumberThe chosen value as a number, for anything doing arithmetic on it.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionfeedbackThe message that says what is wrong, for content richer than a string. It shows while there is a message.hintHelp under the control, for content richer than the hint text.labelThe label, for content richer than the label text.thumbContent drawn on the thumb, such as a glyph: a single slider's thumb, or a range's lower one. It is decoration, hidden from a screen reader.thumb-endContent drawn on a range's upper thumb.
EventTypeDescriptionchangeEventFired when the user releases the thumb.helix-before-changeHelixBeforeChangeEventFired as the value changes. Cancelable: call preventDefault() to keep the current value.inputEventFired after the value changes.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidMoves focus to the control, as focusing a native control does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestValue(next: string) => booleanRequests a new value, and returns whether the change was applied.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.
PartDescriptioncontrolThe range input, one per thumb. On a range each carries data-thumb, start, middle, or end, and data-index, its place from the lowest.feedbackThe error message under the track.fieldThe row that holds the control and its readout.hintThe help text under the track, shown while there is no error.labelThe label above the track.markerOne mark on the track.marker-labelThe value a mark stands at, when marker-labels is set.markersThe row of marks along the track.outputThe current value, shown beside the track.thumbOne thumb's own box over the track, which holds the thumb or thumb-end slot. It carries data-thumb on a range, start, middle, or end, and --slider-at, where its thumb is as a fraction of the track. Draw your own thumb here and hide the native one, or leave it empty.thumbsThe layer over the track that holds each thumb. It is hidden until a thumb slot has content, and then [part="field"] carries data-thumbs.tooltipOne thumb's value in a bubble beside it, under tooltip. It carries data-thumb on a range, start, middle, or end, and --slider-at, where its thumb is as a fraction of the track.tooltipsThe layer over the track that holds the bubbles, under tooltip.
CSS PropertyDescription--slider-atWhere a bubble's or a thumb box's thumb is, as a fraction of the track, 0 to 1. Set on each tooltip and thumb part.--slider-fill-colorThe color of the filled part of the track, behind the thumb.--slider-fractionThe value as a fraction of the range, 0 to 1.--slider-fromWhere the filled span starts, as a fraction of the track, 0 to 1: a range's lower thumb, or a single thumb's origin.--slider-lengthThe length of a vertical track. It defaults to nine rem and applies only when orientation is vertical. A horizontal track takes the width of its row.--slider-marker-atWhere one marker sits, as a percentage of the track.--slider-marker-colorThe color of the marks along the track.--slider-thumb-colorThe color of the thumb.--slider-thumb-content-colorThe color of content in the thumb and thumb-end slots, drawn on the thumb.--slider-thumb-lengthThe thumb's size along the track. It follows --slider-thumb-size unless you set it, and setting one of the two makes the thumb an oval.--slider-thumb-radiusThe thumb's corner radius. It is fully round by default, so a thumb with two different dimensions is a capsule unless you change it.--slider-thumb-ring-colorThe color of the ring between the thumb and the track. Set it for a slider that sits on a surface other than the page background.--slider-thumb-sizeThe thumb's size across the track. It equals the length by default, which makes the thumb round.--slider-toWhere the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its origin.--slider-tooltip-background-colorThe fill of the bubble each thumb shows its value in, under tooltip.--slider-tooltip-colorThe color of the value in a thumb's bubble, under tooltip.--slider-track-colorThe color of the unfilled part of the track.--slider-track-imageAn image for the whole track, such as a gradient for a slider whose value is a color.--slider-track-sizeThe thickness of the track. It matches the progress bar's size by default.
Custom stateDescriptiondraggingA thumb is being dragged, by its thumb or from a press on the track.focus-visibleA thumb has focus that the keyboard brought, where the browser draws a focus ring.invalidThe slider has an error to show, from the browser's validation or from your feedback.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-sliderA value chosen from a range by dragging.
PropTypeDescriptiondefaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.formatOptionsIntl.NumberFormatOptionsIntl.NumberFormat options the value is written with: a currency, a
percent, a unit, or a number of decimals. Written as JSON in the
attribute.formatter(value: number) => stringWrites a value as text, in place of format-options: words for a scale,
or anything Intl.NumberFormat cannot say. A property, since a function
cannot be written in an attribute.hintstringDefault""Help text shown under the control. A validation message replaces it.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.localestringDefault""The locale the value and the words are written in, such as de-DE. Empty
reads the nearest lang, then the browser's language.markerLabelsbooleanDefaultfalseShows the value at each mark.markersnumberDefault0How many marks to draw along the track, evenly spaced, ends included.maxnumberDefault100The largest value that can be chosen. Where it is not a number, such as
max="1OO", the slider stops at 100, as a native range does.maximumLabelstringDefault"maximum"The name of a range's upper thumb, read after the slider's label.minnumberDefault0The smallest value that can be chosen. Where it is not a number, the
slider starts at 0, as a native range does.minimumLabelstringDefault"minimum"The name of a range's lower thumb, read after the slider's label.minStepsBetweenThumbsnumberDefault0How many steps a range's two thumbs stay apart, as Zag's
minStepsBetweenThumbs. A thumb pushed closer stops there.namestringDefault""The name the control's value is submitted under.orientation"horizontal"|"vertical"The direction the track runs. vertical stands it on end.origin"center"|"end"|"start"Where a single thumb's fill starts: start at min, center at the
middle of the track, or end at max. Absent is start. A range fills
between its thumbs and ignores it.pageStepnumberHow far Page Up and Page Down move a thumb, in the slider's own units, as
React Aria's pageSize and Zag's largeStep do. Absent leaves the keys
to the platform, which moves a tenth of the track.rangebooleanDefaultfalseAdds a second thumb, so the value is a pair.rangeTextstringDefault"{start} to {end}"How the readout joins a range's two values, with {start} and {end}
filled in. Write it in the page's language, such as {start} bis {end}.readOnlybooleanDefaultfalseWhether a reader can see and focus the value and cannot change it. A
read-only slider still submits its value.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.showValuebooleanDefaultfalseShows the chosen value beside the track.stepnumberDefault1How far one press of an arrow key moves the thumb. Where it is not a
number, the thumb moves by 1, as on a native range.thumbLabelstringDefault"thumb {index}"The name of a thumb between a range's first and last, read after the
slider's label, with {index} filled in: its place, counted from 1. The
first is minimum-label and the last maximum-label.tooltipbooleanDefaultfalseWhether each thumb shows its value in a bubble beside it, as Web
Awesome's with-tooltip. The styled slider shows the bubbles while the
slider is under the pointer or holds focus. They repeat what each thumb
already reports, so a screen reader skips them.valuestringThe control's current value, which its form submits.valueMissingMessagestringThe message shown when the field is required and empty.valueTextstringDefault""What a screen reader says for a thumb's value, with {value} filled in,
such as {value} degrees. Empty announces the number alone.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.valueAsNumbernumberThe chosen value as a number, for anything doing arithmetic on it.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionfeedbackThe message that says what is wrong, for content richer than a string. It shows while there is a message.hintHelp under the control, for content richer than the hint text.labelThe label, for content richer than the label text.thumbContent drawn on the thumb, such as a glyph: a single slider's thumb, or a range's lower one. It is decoration, hidden from a screen reader.thumb-endContent drawn on a range's upper thumb.
EventTypeDescriptionchangeEventFired when the user releases the thumb.helix-before-changeHelixBeforeChangeEventFired as the value changes. Cancelable: call preventDefault() to keep the current value.inputEventFired after the value changes.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidMoves focus to the control, as focusing a native control does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestValue(next: string) => booleanRequests a new value, and returns whether the change was applied.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.
PartDescriptioncontrolThe range input, one per thumb. On a range each carries data-thumb, start, middle, or end, and data-index, its place from the lowest.feedbackThe error message under the track.fieldThe row that holds the control and its readout.hintThe help text under the track, shown while there is no error.labelThe label above the track.markerOne mark on the track.marker-labelThe value a mark stands at, when marker-labels is set.markersThe row of marks along the track.outputThe current value, shown beside the track.thumbOne thumb's own box over the track, which holds the thumb or thumb-end slot. It carries data-thumb on a range, start, middle, or end, and --slider-at, where its thumb is as a fraction of the track. Draw your own thumb here and hide the native one, or leave it empty.thumbsThe layer over the track that holds each thumb. It is hidden until a thumb slot has content, and then [part="field"] carries data-thumbs.tooltipOne thumb's value in a bubble beside it, under tooltip. It carries data-thumb on a range, start, middle, or end, and --slider-at, where its thumb is as a fraction of the track.tooltipsThe layer over the track that holds the bubbles, under tooltip.
CSS PropertyDescription--slider-atWhere a bubble's or a thumb box's thumb is, as a fraction of the track, 0 to 1. Set on each tooltip and thumb part.--slider-fractionThe value as a fraction of the range, 0 to 1.--slider-fromWhere the filled span starts, as a fraction of the track, 0 to 1: a range's lower thumb, or a single thumb's origin.--slider-marker-atWhere one marker sits, as a percentage of the track.--slider-toWhere the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its origin.
Custom stateDescriptiondraggingA thumb is being dragged, by its thumb or from a press on the track.focus-visibleA thumb has focus that the keyboard brought, where the browser draws a focus ring.invalidThe slider has an error to show, from the browser's validation or from your feedback.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionDisabledA disabled slider, and a slider disabled by the fieldset around it, each still showing its value.EventsA drag fires input many times and change once, at the end.InvalidA slider showing an error message for its value.MarkersMarks along the track, unlabeled and labeled.PreviewA value along a track, with the number shown.PreviewA value along a track, with the number shown.ProportionsA thicker track, and a thumb with a different width and height.RangeTwo thumbs on one track, for choosing a span.ReadonlyA read-only range that a reader can focus and hear and cannot move, and still submits both ends.SteppedA value that moves in steps of 25, set with step.ThumbA grip drawn on each thumb through the thumb and thumb-end slots.ThumbsA range with three thumbs, one for each value, each stopping at its neighbors.TooltipEach thumb shows its value in a bubble while the slider is under the pointer or holds focus.VerticalA vertical track, for a value you picture as high or low.