HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SliderView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA value chosen from a range by dragging.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/slider'import'@fusion.dev/helix-headless/slider'Preview
API ReferenceRoothelix-sliderA value chosen from a range by dragging.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.markerLabelsbooleanfalseWhether each mark says which value it stands at.markersnumber0How many marks to draw along the track, evenly spaced, ends included.maxnumber100The largest value the reader can choose.minnumber0The smallest value the reader can choose.namestring""Name submitted with the form.orientation"horizontal"|"vertical"Which way the track runs, `vertical` standing it on end.rangebooleanfalseWhether there are two thumbs and the value is a pair.requiredbooleanfalseWhether the form refuses to submit without it.showValuebooleanfalseWhether the chosen value is shown beside the track.stepnumber1How far one press of an arrow key moves it.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.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.
EventTypeDescriptionchangeEventRelayed once the reader has let go.helix-before-changeHelixBeforeChangeEventFired as the value changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptioncontrolThe range input.feedbackWhat is wrong with it.fieldThe row: the control and its readout.hintHelp under the track, while nothing is wrong.labelThe question, over the track.markerOne mark.marker-labelThe value a mark stands at, when `marker-labels` is set.markersThe row of marks along the track.outputThe current value, shown beside it.
CSS PropertyDescription--slider-fill-colorThe part behind the thumb.--slider-fractionThe value as a fraction of the range, 0 to 1.--slider-fromWhere the filled span starts, as a percentage of the track.--slider-lengthHow long a vertical track is. Nine rem by default, and read only when `orientation` is `vertical`, a horizontal track taking the width of its row.--slider-marker-atWhere one marker sits, as a percentage of the track.--slider-marker-colorThe ticks along the track.--slider-thumb-colorThe handle.--slider-thumb-lengthThe handle along the track. Follows the size unless it is told otherwise, and setting one of the two is what makes the handle an oval.--slider-thumb-radiusThe handle's corners. Fully round by default, so a handle given two dimensions is a capsule until this says otherwise.--slider-thumb-ring-colorThe fence separating the handle from the track, for a slider that is not on the page.--slider-thumb-sizeThe handle across the track. Square with the length by default, which is what makes it round.--slider-toWhere the filled span ends, as a percentage of the track.--slider-track-colorThe part not yet chosen.--slider-track-imageThe whole track, for a slider whose color is the value.--slider-track-sizeHow thick the track is. The progress bar's own size by default, the two being the same object.
Roothelix-headless-sliderA value chosen from a range by dragging.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.markerLabelsbooleanfalseWhether each mark says which value it stands at.markersnumber0How many marks to draw along the track, evenly spaced, ends included.maxnumber100The largest value the reader can choose.minnumber0The smallest value the reader can choose.namestring""Name submitted with the form.orientation"horizontal"|"vertical"Which way the track runs, `vertical` standing it on end.rangebooleanfalseWhether there are two thumbs and the value is a pair.requiredbooleanfalseWhether the form refuses to submit without it.showValuebooleanfalseWhether the chosen value is shown beside the track.stepnumber1How far one press of an arrow key moves it.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.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.
EventTypeDescriptionchangeEventRelayed once the reader has let go.helix-before-changeHelixBeforeChangeEventFired as the value changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptioncontrolThe range input.feedbackWhat is wrong with it.fieldThe row: the control and its readout.hintHelp under the track, while nothing is wrong.labelThe question, over the track.markerOne mark.marker-labelThe value a mark stands at, when `marker-labels` is set.markersThe row of marks along the track.outputThe current value, shown beside it.
CSS PropertyDescription--slider-fractionThe value as a fraction of the range, 0 to 1.--slider-fromWhere the filled span starts, as a percentage of the track.--slider-marker-atWhere one marker sits, as a percentage of the track.--slider-toWhere the filled span ends, as a percentage of the track.
ExamplesNameDescriptionDisabledDisabled, with the handle still showing where the value is.EventsA drag is a stream of one event, and the other arrives once, at the end.InvalidA value the control will not accept, and what it says.MarkersMarks along the track, unlabelled and labeled.PreviewA value along a track, with the number shown.PreviewA value along a track, with the number shown.ProportionsA track given thickness and a handle given two dimensions.RangeTwo thumbs on one track, for a span rather than a point.SteppedA value that moves in named steps rather than continuously.VerticalA track standing on end, for a level rather than a quantity.