SlowlyRange slider
A slider control for picking a value or a range between a min and max.
The Range Slider is a control for picking a value, or a range, by dragging along a track between a minimum and a maximum. It sits inside a Filter block and suits price filters, any numeric scale, or anywhere a visitor needs to narrow results by threshold.
Adding one
- Select a Filter block to hold the slider.
- Open the inserter and search "range-slider".
- Pick the Range Slider block.
Settings
In the range slider's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Minimum | The lowest value the track represents | Every slider; sets where the left end lands |
| Maximum | The highest value the track represents | Every slider; sets where the right end lands |
| Step | The increment between selectable values | Whole numbers on a price filter, or larger steps on a coarse scale |
| Handles | Number of drag handles on the track | Two handles for a range (from/to); one for a single value |
| Vertical | Rotates the track to run top-to-bottom | Tall narrow layouts where a horizontal track would feel cramped |
| Range | Whether the filled portion covers the whole track or only the selected span | Single-value sliders where the fill helps show position |
| Push | Prevents the two handles from crossing or merging | Range sliders where from must stay below to |
| Label | Shows a floating label above each handle with its current value | Any slider where the exact number helps the visitor |
| Prefix | Text prepended to handle label values, such as a currency symbol | Price filters |
| Suffix | Text appended to handle label values, such as a unit | Distance or weight filters |
| Pips | Tick marks along the track at regular intervals | When the scale landmarks help visitors orient |
| Pip step | How many values apart each pip sits | Sparser marks on long scales |
| Hover effects | Subtle visual response when the pointer moves over the handle | On by default; turn off for a fully custom state via CSS |
| Format labels | Number format locale or pattern applied to displayed values | Localised price display, large numbers with separators |
Styling
The track, filled range, and handles each carry their own colour controls in the range slider's settings panel, alongside the shared design panel. Use the states panel to style the focused and active handle distinctly, which matters both for aesthetics and for the keyboard-accessible focused state.
Accessibility
The range slider renders as one or more input[type=range] elements, which keyboard users can operate with arrow keys once focused. Make sure the slider sits inside a labelled form context, or pair it with a visible text label in the surrounding layout, so screen readers announce what the control is for. If you show a label above each handle, that label is decorative; the accessible name still needs to come from a form label or aria-label on the input.
If your site supports reduced-motion preferences, consider whether the hover effects add distraction; the Hover effects toggle in settings gives you a clean off state to style around.