Components
Slider

Slider

The slider is a bar that helps the user select a value (slider) or a range value within a preset range of values ​​(ranger).

Slider

Slider - Disabled

Ranger

Ranger

$10
$40

Usage

import { Slider } from "@momo-webplatform/mobase";
<Slider
  defaultValue={[40]}
  min={1}
  max={50}
  step={1}
  minStepsBetweenThumbs={1}
/>
Note : use [valueFirst , valueSecond] for type Ranger

API Reference

Slider
PropTypeDefaultRequired
min
number--false
max
number--false
inverted
enumboolean--false
defaultValue
number[]--false
dir
enumDirection--false
asChild
enumboolean--false
name
string--false
disabled
enumboolean--false
orientation
enumhorizontal | vertical--false
step
number--false
minStepsBetweenThumbs
number--false
value
number[]--false
onValueChange
(value: number[]) => void--false
onValueCommit
(value: number[]) => void--false

Best practices

  • Use a slider to allow users to select a range of values.