Skip to main content
‌
‌

Slider

An input where the user selects a value from within a given range.

Quick nav

Features

  • Multiple sizes
  • Can be controlled or uncontrolled
  • Supports touch or click on track to update value
  • Supports Right to Left direction
  • Full keyboard navigation

Links

View source Report an issue ARIA design ARIA authoring

Anatomy

import { Slider } from "@wonderflow/react-components";


export default () => {

  return <Slider />;

};

tsx

Examples

With icons

If you don't want to use numeric values you can use icons instead.

API Reference

Property
Type
Default
min
number
0
max
number
100
step
number
onInput
function
defaultValue
number
0
showValues
boolean
iconMin
enum
iconMax
enum
dimension
enum
regular

Accessibility

Adheres to the slider role requirements.

Keyboard interactions

ArrowRight

Increments/decrements by the step value depending on orientation

ArrowLeft

Increments/decrements by the step value depending on orientation

ArrowUp

Increases the value by the step amount

ArrowDown

IDecreases the value by the step amount

PageUp

Increases the value by a larger step

PageDown

Decreases the value by a larger step

Home

Sets the value to its minimum

End

Sets the value to its maximum