rc-simple-slider

rc-simple-slider

简单滑块组件

用法

import { Slider } from "rc-simple-slider";

export default function App() {
    return (
        <div>
            <Slider />
        </div>
    );
}

属性

Name	Type	Default	Description
step	number	100	步长
width	number	vertical 为 true 时 6，为 false 时 300	宽度
height	number	vertical 为 true 时 300，为 false 时 6	高度
showTip	boolean	false	是否显示提示
vertical	boolean	false	垂直模式
disabled	boolean	false	是否禁用
tipBgColor	string	#333	提示背景颜色
tipFtColor	string	#fff	提示字体颜色
contentContainerStyle	object	{}	容器样式
progressBarColor	string	#686de0	进度条颜色
range	number or [number, number]	0	选择范围
showStops	boolean	false	是否显示间断点
marks	object		标记， key 的类型必须为 number 且取值在闭区间 0-100 内，每个标记可以单独设置样式
debounce	number		去抖延迟，毫秒，仅 onInput 有用
tipFormat	Function	noop	提示信息格式化
ariaValuetextFormat	Function	noop	显示屏幕阅读器的 aria-valuenow 属性的格式化
children	Function		替代默认的 button
onInput	Function	noop	值改变时触发
onChange	Function	noop	值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）

example

vertical

import { Slider } from "rc-simple-slider";

export default function App() {
    return (
        <div>
            <Slider vertical/>
        </div>
    );
}

showStops && step=10

import { Slider } from "rc-simple-slider";

export default function App() {
    return (
        <div>
            <Slider showStops step={10}/>
        </div>
    );
}

marks

import { Slider } from "rc-simple-slider";
const marks = {
    0: 0,
    8: 8,
    50: 50,
    70: {
        style: {
            color: 'deeppink',
            fontSize: 18,
        },
        label: 70,
    },
};

export default function App() {
    return (
        <div>
            <Slider marks={marks}/>
        </div>
    );
}

children

import { Slider } from "rc-simple-slider";
import Pikachu from './Pikachu.png';

export default function App() {
    return (
        <div>
            <Slider>
                {() => {
                    return (
                        <img
                            style={{ width: '100%', height: '100%', position: 'absolute' }}
                            src={Pikachu}
                        />
                    );
                }}
            </Slider>
        </div>
    );
}