# Slider

滑动型输入器，展示当前值和可选范围。

# Usage

## 基本
```tsx
/**
 * title: 基本
 * desc: 基本滑动条。可通过 `step` 控制步长。<br>当 `disabled` 为 `true` 时，滑块处于不可用状态。
 */
import React from 'react'
import { Slider } from 'react-icecream'

export default () => {
  return (<>
    <div style={{ width: '450px' }}>
      <Slider defaultValue={30} />
      <Slider defaultValue={10} step={5} />
      <Slider defaultValue={70} disabled />
    </div>
    <div>
      <style>{`
        .my-slider {
          width: 200px;
        }
      `}</style>
      <Slider defaultValue={50} className="my-slider" />
    </div>
  </>)
}
```

## 垂直
```tsx
/**
 * title: 垂直
 * desc: 垂直方向的滑动条。
 */
import React from 'react'
import { Slider } from 'react-icecream'

export default () => {
  return (
    <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-end', height: '150px' }}>
      <Slider min={1} max={9} defaultValue={4} vertical />
      <style>{`
        .my-slider {
          height: 130px;
        }
      `}</style>
      <Slider defaultValue={50} vertical className="my-slider" />
    </div>
  )
}
```

## 自定义提示
```tsx
/**
 * title: 自定义提示
 * desc: 使用 `tipFormatter` 可以格式化 `Tooltip` 的内容。<br>设置 `tipFormatter={null}`，可隐藏 `Tooltip`。
 */
import React from 'react'
import { Slider } from 'react-icecream'

export default () => {
  return (
    <div style={{ width: '450px' }}>
      <Slider defaultValue={30} tipFormatter={v => `${v}%`} />
      <Slider defaultValue={70} tipFormatter={null} />
    </div>
  )
}
```

## 反向
```tsx
/**
 * title: 反向
 * desc: 设置 `reverse` 可以将滑动条置反。
 */
import React from 'react'
import { Slider } from 'react-icecream'

export default () => {
  return (
    <div style={{ width: '450px' }}>
      <Slider defaultValue={30} reverse />
    </div>
  )
}
```

## 事件
```tsx
/**
 * title: 事件
 * desc: 当 Slider 的值发生改变时，会触发 `onChange` 事件，并把改变后的值作为参数传入。<br>`onmouseup` 时，会触发 `onAfterChange` 事件，并把当前值作为参数传入。
 */
import React, { useState } from 'react'
import { Slider } from 'react-icecream'

export default () => {
  const [value, setValue] = useState(30)

  function onChange(value) {
    console.log('onChange: ', value)
    setValue(value)
  }

  function onAfterChange(value) {
    console.log('onAfterChange: ', value)
  }

  return (
    <div style={{ width: '450px' }}>
      <Slider value={value} onChange={onChange} onAfterChange={onAfterChange}/>
    </div>
  )
}
```

<API></API>