Slider
Ranges allow the user to select a single value within a given range using a slider.
val valueVar = Var(3.0)Slider( _.label := "Number of cats", _.hint := "Limit six per household", _.name := "value", _.value <-- valueVar.signal.map(_.toString), _.onInput.map(_.target.value) --> valueVar, _.min := 0, _.max := 6, _.withMarkers := true, _.withTooltip := true, _.slots.reference(span("Less")), _.slots.reference(span("More")))()This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.
Examples
Labels
Use the label attribute to give the slider an accessible label. For labels that contain HTML, use the label slot instead.
Slider( _.label := "Volumn", _.min := 0, _.max := 100)()Hint
Add descriptive hint to a slider with the hint attribute. For hints that contain HTML, use the hint slot instead.
Slider( _.label := "Volumn", _.hint := "Controls the volume of the current song.", _.min := 0, _.max := 100, _.value := "50")()Showing tooltips
Use the with-tooltip attribute to display a tooltip with the current value when the slider is focused or being dragged.
Slider( _.label := "Quality", _.name := "quality", _.withTooltip := true, _.hint := "Controls the volume of the current song.", _.min := 0, _.max := 100, _.value := "50")()Setting min, max, and step
Use the min and max attributes to define the slider's range, and the step attribute to control the increment between values.
Slider( _.label := "Between zero and one", _.hint := "Controls the volume of the current song.", _.withTooltip := true, _.min := 0, _.max := 1, _.step := 0.1, _.value := "0.5")()Showing markers
Use the with-markers attribute to display visual indicators at each step increment. This works best with sliders that have a smaller range of values.
Slider( _.label := "Size", _.name := "size", _.withMarkers := true, _.min := 0, _.max := 8, _.value := "4")()Adding references
Use the reference slot to add contextual labels below the slider. References are automatically spaced using space-between, making them easy to align with the start, center, and end positions.
Slider( _.label := "Speed", _.name := "speed", _.withMarkers := true, _.min := 1, _.max := 5, _.value := "3", _.hint := "Controls the speed of the thing you're currently doing.", _.slots.reference(span("Slow")), _.slots.reference(span("Medium")), _.slots.reference(span("Fast")))()If you want to show a reference next to a specific marker, you can add position: absolute to it and set the left, right, top, or bottom property to a percentage that corresponds to the marker's position.
Vertical Sliders
Set the orientation attribute to vertical to create a vertical slider. Vertical sliders automatically center themselves and fill the available vertical space.
div( cls("flex gap-4"), Slider( _.label := "Volume", _.name := "volume", _.orientation.vertical, _.value := "65", _.style := "width: 80px" )(), Slider( _.label := "Bass", _.name := "bass", _.value := "50", _.orientation.vertical, _.style := "width: 80px" )(), Slider( _.label := "Treble", _.name := "treble", _.value := "40", _.orientation.vertical, _.style := "width: 80px" )())Size
Control the slider's size using the size attribute. Valid options include small, medium, and large.
Slider( _.label := "Small", _.size.small, _.value := "50")()Slider( _.label := "Medium", _.size.medium, _.value := "50")()Slider( _.label := "Large", _.size.large, _.value := "50")()Indicator Offset
By default, the filled indicator extends from the minimum value to the current position. Use the indicator-offset attribute to change the starting point of this visual indicator.
Slider( _.label := "User Friendliness", _.hint := "Did you find our product easy to use?", _.name := "value", _.value := "0", _.min := -5, _.max := 5, _.indicatorOffset := 0, _.withMarkers := true, _.withTooltip := true, _.slots.reference(span("Easy")), _.slots.reference(span("Moderate")), _.slots.reference(span("Difficult")))()Disabled
Use the disabled attribute to disable a slider.
Slider( _.label := "Disabled", _.value := "50", _.disabled := true )()Required
Mark a slider as required using the required attribute. Users must interact with required sliders before the form can be submitted.
Slider( _.label := "Required slider", _.min := 0, _.max := 10, _.required := true )()