Slider

版本要求:

@ray-js/ray≥0.5.10

描述

滑动选择器，通过拖动滑块在数值区间内选取结果。

属性

属性	类型	必填	默认值	说明
`min`	number	否	0	最小值
`max`	number	否	100	最大值
`step`	number	否	1	步长，取值必须大于 0，并且可被 (max - min) 整除
`disabled`	boolean	否	false	是否禁用
`value`	number	否	0	当前取值
`activeColor`	string	否	#007AFF	已选择的颜色
`backgroundColor`	string	否	rgba(0, 0, 0, 0.2)	背景条的颜色
`blockSize`	number	否	28	滑块的大小，取值范围为 12～28
`blockColor`	string	否	#FFF	滑块的颜色
`showValue`	boolean	否	false	是否显示当前 value
`name`	string	否	-	表单控件名称，提交表单时作为键名
		否	-	完成一次拖动后触发
		否	-	拖动过程中触发

示例代码

基础用法

import React from 'react';
import { Slider, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Slider
        onChange={(e) => {
          console.log('Slider 改变:', e.detail.value);
        }}
      />
    </View>
  );
}

自定义样式

import React, { useState } from 'react';
import { Slider, View, Text } from '@ray-js/ray';

export default function () {
  const [value, setValue] = useState(100);

  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '20px' }}>
        <Text>显示数值:</Text>
        <Slider
          value={value}
          showValue
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>自定义范围和步长:</Text>
        <Slider
          min={50}
          max={200}
          step={5}
          value={value}
          showValue
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>自定义颜色:</Text>
        <Slider
          value={value}
          activeColor="orange"
          blockColor="pink"
          backgroundColor="#e0e0e0"
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
    </View>
  );
}

禁用与拖动事件

import React from 'react';
import { Slider, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '20px' }}>
        <Text>禁用状态:</Text>
        <Slider disabled value={40} style={{ marginTop: '10px' }} />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>自定义滑块大小 + 拖动中事件:</Text>
        <Slider
          blockSize={18}
          showValue
          onChanging={(e) => console.log('拖动中:', e.detail.value)}
          onChange={(e) => console.log('拖动结束:', e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
    </View>
  );
}