1.3.0 • Published 2 years ago

@illa-design/slider v1.3.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 years ago

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

PropsDescTypeDefault
showTicksWhether show ticksboolean-
showInputWhether show number inputboolean-
reverseWhether reverse ticksboolean-
marksset ticks‘ markRecord<number, ReactNode>-
verticalWhether make silder verticalboolean-
tooltipVisibleWhether always show tooltipboolean-
tooltipPositionSet the position of tooltip"top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb""top"
disabledWhether disable the componentboolean-
minSet minimum valuenumber0
maxSet maxmum valuenumber100
stepSet step of every ticknumber1
onlyMarkValuewhether only marked value can be selectedboolean-
defaultValueSet defaultValuenumber | number[]-
formatTooltipCustomize the tooltip(value: number) => string | ReactNode-

Slider Events

PropsDescTypeDefault
onAfterChangeCallback after value is changed(val: number | number[]) => void-
onChangeCallback when value is changed(val: number | number[]) => void-

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 }}
/>
1.2.0

2 years ago

1.3.0

2 years ago

1.1.0

2 years ago

1.0.26

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.30

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.19

2 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.13

2 years ago

1.0.12

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.0.15

3 years ago

0.0.9

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago