Quaff

QSlider

Sliders adjust a single value or the bounds of a range. Continuous movement, fixed steps, and value indicators help users make precise selections.

info QSlider API Source
interface QSliderProps extends QSliderHTMLInputAttributes
centered
?: boolean = false
Uses the center of the range as the slider origin.
class
?: HTMLAttributes<HTMLDivElement>["class"] = undefined
Classes applied to the slider wrapper.
color
?: string = primary
Active track and handle color.
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
expressive
?: boolean = undefined
Enables Material 3 Expressive sizes, vertical orientation, and inset icons. When omitted, inherits the `Quaff.init()` setting (false by default). Set true or false to override it.
icon
?: MaterialSymbol | Snippet = undefined
Optional inset icon for a standard expressive slider of size md, lg, or xl.
label
?: boolean = false
Shows the current value while the handle is pressed or keyboard-focused.
labelValue
?: string | number = undefined
Text shown in the value indicator instead of the numeric value.
markers
?: boolean | number = false
Shows stop indicators. A number sets both their interval and the snapping increment; true uses the step interval.
max
?: number = 100
Maximum selectable value.
min
?: number = 0
Minimum selectable value.
readonly
?: boolean = false
Prevents value changes while retaining keyboard focus.
reverse
?: boolean = false
Reverses the value direction.
size
?: QSliderSize = xs
Slider size. Sizes other than xs are available in expressive mode.
step
?: number = 1
Value increment. Set to 0 for continuous pointer input.
style
?: HTMLAttributes<HTMLDivElement>["style"] = undefined
Styles applied to the slider wrapper.
trackColor
?: string = secondary-container
Inactive track color.
value
?: number = $bindable(0)
The bound value of the component.
vertical
?: boolean = false
Uses a vertical orientation. Available in expressive mode. Material 3 recommends keeping range sliders horizontal to reduce cognitive load.
info QRange API Source
interface QRangeProps extends QSliderHTMLInputAttributes
class
?: HTMLAttributes<HTMLDivElement>["class"] = undefined
Classes applied to the slider wrapper.
color
?: string = primary
Active track and handle color.
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
expressive
?: boolean = undefined
Enables Material 3 Expressive sizes, vertical orientation, and inset icons. When omitted, inherits the `Quaff.init()` setting (false by default). Set true or false to override it.
icon
?: MaterialSymbol | Snippet = undefined
Optional inset icon for a standard expressive slider of size md, lg, or xl.
label
?: boolean = false
Shows the current value while the handle is pressed or keyboard-focused.
markers
?: boolean | number = false
Shows stop indicators. A number sets both their interval and the snapping increment; true uses the step interval.
max
?: number = 100
Maximum selectable value.
maxAriaLabel
?: string = undefined
Accessible label for the upper-value handle.
maxLabelValue
?: string | number = undefined
Text shown for the upper value indicator.
min
?: number = 0
Minimum selectable value.
minAriaLabel
?: string = undefined
Accessible label for the lower-value handle.
minLabelValue
?: string | number = undefined
Text shown for the lower value indicator.
readonly
?: boolean = false
Prevents value changes while retaining keyboard focus.
reverse
?: boolean = false
Reverses the value direction.
size
?: QSliderSize = xs
Slider size. Sizes other than xs are available in expressive mode.
step
?: number = 1
Value increment. Set to 0 for continuous pointer input.
style
?: HTMLAttributes<HTMLDivElement>["style"] = undefined
Styles applied to the slider wrapper.
trackColor
?: string = secondary-container
Inactive track color.
value
?: QRangeValue = $bindable([0, 100])
The bound value of the component.
vertical
?: boolean = false
Uses a vertical orientation. Available in expressive mode. Material 3 recommends keeping range sliders horizontal to reduce cognitive load.

Usage

Standard Slider
Bind value to select one value between min and max. Changes take effect immediately.
Volume: 35
Centered Slider
A centered slider visualizes negative and positive values around the middle of its range.
Balance: -20
Range Slider
QRange exposes lower and upper handles. Give each handle a clear accessible label.
Price: $25 – $70
Stops and Value Indicators
Set step and markers for predetermined stops. Use label to show the active handle's value while it is pressed or keyboard-focused.
Expressive Sliders
Enable expressive for expanded sizes, vertical orientation, and inset icons, or pass { expressive: true } to Quaff.init() for global expressive styling. Material 3 recommends keeping range sliders horizontal to reduce cognitive load.
XS
SM
MD
LG
XL
Direction and States
Use reverse to reverse the value direction. Read-only sliders remain focusable, while disabled sliders are removed from keyboard navigation.
Reversed
Read-only
Disabled
Accessibility
Each handle is a native range input. Tab moves focus to a handle, arrow keys adjust one value or stop, Space with an arrow adjusts one interval, and Home or End selects the first or last value. Associate sliders with visible labels using aria-labelledby, or provide aria-label.
Privacy Policy