---
title: WKSlider 滑动条
group:
  title: 表单组件
  path: /form/
---

## 何时使用

当用户需要在数值区间/自定义区间内进行选择时。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import { View, WKPage, WKSlider } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import './index.less';

export default () => {
  return (
    <PageWrapper title="基本使用">
      <View className="wk-divider-page" style={{ width: '100%' }}>
        <View className="content">
          <WKSlider />
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 指定选择范围

```tsx
/**
 * title: 指定选择范围
 * desc: 传入最小值和最大值，可以限制滑动条的最小值和最大值
 */
import React from 'react';
import { View, WKPage, WKSlider } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import './index.less';

export default () => {
  return (
    <PageWrapper title="指定选择范围">
      <View className="wk-divider-page" style={{ width: '100%' }}>
        <View className="content">
          <WKSlider min={20} max={80} value={60} showValue />
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 禁用

```tsx
/**
 * title: 禁用
 * desc: 传入disabled，滑动条禁用状态
 */
import React from 'react';
import { View, WKPage, WKSlider } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import './index.less';

export default () => {
  return (
    <PageWrapper title="禁用">
      <View className="wk-divider-page" style={{ width: '100%' }}>
        <View className="content">
          <WKSlider value={60} disabled />
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 指定步长

```tsx
/**
 * title: 指定步长
 * desc: 传入step步长的值，每次滑动都移动步长的距离
 */
import React from 'react';
import { View, WKPage, WKSlider } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import './index.less';

export default () => {
  return (
    <PageWrapper title="指定步长">
      <View className="wk-divider-page" style={{ width: '100%' }}>
        <View className="content">
          <WKSlider step={20} value={40} />
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 自定义样式

```tsx
/**
 * title: 自定义样式
 * desc: 可以传入activeColor，改变滑动条的颜色
 */
import React from 'react';
import { View, WKPage, WKSlider } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import './index.less';

export default () => {
  return (
    <PageWrapper title="自定义样式">
      <View className="wk-divider-page" style={{ width: '100%' }}>
        <View className="content">
          <WKSlider activeColor="#1B99FF" value={60} />
        </View>
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKSlider/index.d.ts' ></API>
