Skip to content
Documentation
Components
Basic
Slider

Slider

A slider lets the user pick a number within a range by dragging a handle. RangeSlider has two handles and selects an interval, e.g. a price range. Both live in package presentation/ui/slider and bind to a state: *core.State[float64] for the slider and *core.State[slider.RangeSliderValue] with the fields From and To for the range slider.

Slider

volume := core.AutoState[float64](wnd).Init(func() float64 { return 40 })
price := core.AutoState[slider.RangeSliderValue](wnd).Init(func() slider.RangeSliderValue {
	return slider.RangeSliderValue{From: 20, To: 60}
})

VStack(
	slider.Slider(0, 100).
		Label("Volume").
		Unit("%").
		InputValue(volume).
		Frame(Frame{Width: L400}),
	slider.RangeSlider(0, 100).
		Label("Price").
		Unit("€").
		Step(5).
		ShowMarkers(true).
		InputValue(price).
		Frame(Frame{Width: L400}),
).Alignment(Leading).Gap(L32)

Constructors

ConstructorDescription
func Slider(min, max float64) TSliderCreates a slider with the given range.
func RangeSlider(min, max float64) TRangeSliderCreates a range slider with the given range.

Methods

TSlider and TRangeSlider have the same methods; they only differ in the type of the value.

MethodDescription
Disabled(disabled bool) TSliderDisabled disables or enables the slider.
ErrorText(text string) TSliderErrorText sets an error message for the slider.
Frame(frame ui.Frame) TSliderFrame sets the layout frame of the slider (size, width, height, etc.).
InputValue(input *core.State[float64]) TSliderInputValue binds the slider to a reactive state.
Label(label string) TSliderLabel sets the label text of the slider.
Max(max float64) TSliderMax defines the max value of the slider.
Min(min float64) TSliderMin defines the min value of the slider.
ShowMarkers(showMarkers bool) TSliderShowMarkers defines whether to show markers on the slider.
Step(step float64) TSliderStep defines the step size to increase/decrease number values stepwise.
SupportingText(text string) TSliderSupportingText sets helper text for the slider.
Unit(unit string) TSliderUnit defines the unit to be displayed next to the value.
Value(value float64) TSliderValue sets a static value for the slider.

For TRangeSlider, InputValue takes a *core.State[RangeSliderValue] and Value a RangeSliderValue.

Related