MyGo
Slider

Choices

Slider

A slider setting a value in a range, with or without steps.

Slider

ui.Slider creates a slider setting a *float64 between a low and a high value: dragging the knob, or a press on the track, sets it, as do the arrows, Page Up and Page Down (a tenth of the range), Home and End while it has the keyboard focus. Changed reports a new value.

ui.Slider(c, &app.volume, 0, 100).Label("Volume")

Steps

ui.StepSlider snaps the value to the low value and multiples of a step from it, with a tick mark at each, as AppKit's sliders with tick marks: dragging snaps to them, and the arrows step by step.

ui.StepSlider(c, &app.quality, 0, 100, 25).Label("Quality")

For a low and a high value at once, as a price range, use a range slider; for exact numbers, a number input or a stepper.

Without a look

ui.SliderBase is a slider without a look: dragging across its content box, within its padding, sets the value. Draw its track and thumb where (value-lo)/(hi-lo) puts them, and pad it by half the thumb's width to keep the thumb inside it. Right to left, the low value is at the right, as a Slider draws it, and the arrows move the thumb the way they point: draw it mirrored when c.Direction() is ui.RightToLeft:

s := ui.SliderBase(c, &app.volume, 0, 100).Height(24).PaddingX(12)
at := float32(app.volume / 100)
if c.Direction() == ui.RightToLeft {
	at = 1 - at
}
s.Draw(func(p *ui.Painter, r ui.Rect) {
	x := r.X + 12 + (r.W-24)*at
	p.Fill(ui.Rect{X: r.X + 12, Y: r.Y + 10, W: r.W - 24, H: 4}, gray, 2)
	p.Fill(ui.Rect{X: x - 12, Y: r.Y, W: 24, H: 24}, blue, 12)
})

Step snaps its values to the low value and multiples of a step, which the arrows move between, rather than by a hundredth of the range, and Vertical makes it go up, from the low value at the bottom of its content box; pad it by half the thumb's height then:

ui.SliderBase(c, &app.level, 0, 10).Step(1).Vertical().Size(24, 120).PaddingY(12).Draw(drawLevel)

See custom widgets.

Accessibility

Assistive technology sees a slider of its range and value, named by its Label, horizontal or vertical, which it increments and decrements as the arrows do.