@ug666/react 文档演示

Slider 数值滑块

Slider 适合音量、亮度、进度等连续数值的直觉化调节，支持受控/非受控、min/max/step 与当前值显示。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Slider } from '@ug666/react'

基础用法

0–100 范围的受控滑块，实时输出当前值。

当前值：40

自定义范围

设置 min=-50、max=50，适合温度、偏差等对称区间。

当前值：0

步长控制

step=5 时每次移动跳 5 个单位，适合需要精度对齐的场景。

当前值：25

显示当前值

开启 showValue 后，数值将实时浮现在滑块上方。

禁用状态

disabled=true 时禁止拖动，视觉上呈现半透明。

代码示例

在业务中受控绑定音量控制的完整用法。

import { useState } from 'react'
import { Slider } from '@ug666/react'

export function VolumeControl() {
  const [volume, setVolume] = useState(50)

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium text-text-primary">音量：{volume}</label>
      <Slider
        value={volume}
        onValueChange={setVolume}
        min={0}
        max={100}
        step={1}
        showValue
      />
    </div>
  )
}

Props 说明

属性	类型	默认值	说明
value	number	—	当前值（受控模式）。
defaultValue	number	0	初始值（非受控模式）。
min	number	0	最小值。
max	number	100	最大值。
step	number	1	步进值。
disabled	boolean	false	禁用滑动与交互。
showValue	boolean	false	在滑块上方显示当前数值。
onValueChange	(value: number) => void	—	值变化时触发的回调。