@illa-design/slider v1.3.0

Slider

It is a number inpuit component that input value by slide.

Installation

yarn add @illa-design/slider

Import component

import { Slider } from "@illa-dedign/slider"

API

Slider Basic Properties

Slider Events

Example

Basic usage

<Slider
  value={value}
  onChange={(val: number | number[]) => {
    setValue(val as number)
  }}
  style={{ width: 400 }}
/>

Set step

<Slider
  defaultValue={0}
  onChange={(val: number | number[]) => {
    setValue(val as number)
  }}
  step={2}
  showTicks
  style={{ width: 400 }}
/>

Set input range

const [value, setValue] = React.useState(0)
<Slider
  onChange={(val: number | number[]) => {
    setValue(val as number)
  }}
  min={0}
  max={20}
  step={2}
  showTicks
  style={{ width: 400 }}
/>

Set tick's mark

const [value, setValue] = React.useState(0)
<Slider
  onChange={(val: number | number[]) => {
    setValue(val as number)
  }}
  step={2}
  marks={{
    0: "0km",
    5: "5km",
    10: "10km",
    15: "15km",
}}
  style={{ width: 400 }}
/>

Show number input

const [value, setValue] = React.useState(0)
<Slider
	showInput
  onChange={(val: number | number[]) => {
    setValue(val as number)
  }}
  step={1}
  marks={{
    0: "0km",
    5: "5km",
    10: "10km",
    15: "15km",
}}
  style={{ width: 400 }}
/>