Slider

Import

Slider: The main component to display a slider.

Usage

import { Slider } from "@openlite/ui"
 
export function SliderDemo() {
  return (
    <Slider defaultValue={[50]} max={100} step={1} />
  )
}

Examples

Default

import { Slider } from "@openlite/ui"
 
export function SliderDemo() {
  return (
    <Slider  variant="default" defaultValue={[22]} max={100} step={1} />
  )
}

Primary

import { Slider } from "@openlite/ui"
 
export function SliderDemo() {
  return (
    <Slider  variant="primary" defaultValue={[80]} max={100} step={1} />
  )
}

Success

import { Slider } from "@openlite/ui"
 
export function SliderDemo() {
  return (
    <Slider  variant="success" defaultValue={[100]} max={100} step={1} />
  )
}

Warn

import { Slider } from "@openlite/ui"
 
export function SliderDemo() {
  return (
    <Slider  variant="warn" defaultValue={[56]} max={100} step={1} />
  )
}

Error

import { Slider } from "@openlite/ui"
 
export function SliderDemo() {
  return (
    <Slider  variant="error" defaultValue={[10]} max={100} step={1} />
  )
}

API

Slider Props

Props	Type	Description
defaultValue	number[]	The default value of the slider.
max	number	The maximum value of the slider.
min	number	The minimum value of the slider.
step	number	The granularity the slider can step through values.
variant	`'default' \| 'primary' \| 'success' \| 'warn' \| 'error'`	The variant of the slider.

Slider

On this page