v14.0.8


inputs

Slider

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

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
0100

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
label
string
disabled
boolean

Accessibility

Adheres to the slider role requirements.

Keyboard interactions

NameDescription
ArrowRightIncrements/decrements by the step value depending on orientation
ArrowLeftIncrements/decrements by the step value depending on orientation
ArrowUpIncreases the value by the step amount
ArrowDownIDecreases the value by the step amount
PageUpIncreases the value by a larger step
PageDownDecreases the value by a larger step
HomeSets the value to its minimum
EndSets the value to its maximum

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024