Slider

Requires:

@ray-js/ray≥0.5.10

Description

Slider for selecting a value within a range by dragging the handle.

Props

Property	Type	Required	Default	Description
`min`	number	No	0	Minimum value
`max`	number	No	100	Maximum value
`step`	number	No	1	Step; must be greater than 0 and evenly divide (max - min)
`disabled`	boolean	No	false	Whether disabled
`value`	number	No	0	Current value
`activeColor`	string	No	#007AFF	Selected color
`backgroundColor`	string	No	rgba(0, 0, 0, 0.2)	Background track color
`blockSize`	number	No	28	Thumb size, range: 12–28
`blockColor`	string	No	#FFF	Thumb color
`showValue`	boolean	No	false	Whether to show the current value
`name`	string	No	-	Form field name, used as the key on form submit
		No	-	Triggered after a drag completes
		No	-	Triggers during dragging

Examples

Basic usage

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 changed:', e.detail.value);
        }}
      />
    </View>
  );
}

Custom styles

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>Display value:</Text>
        <Slider
          value={value}
          showValue
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>Custom range and step:</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>Custom colors:</Text>
        <Slider
          value={value}
          activeColor="orange"
          blockColor="pink"
          backgroundColor="#e0e0e0"
          onChange={(e) => setValue(e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
    </View>
  );
}

Disabled and drag events

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>Disabled state:</Text>
        <Slider disabled value={40} style={{ marginTop: '10px' }} />
      </View>
      <View style={{ marginBottom: '20px' }}>
        <Text>Custom thumb size + dragging event:</Text>
        <Slider
          blockSize={18}
          showValue
          onChanging={(e) => console.log('Dragging:', e.detail.value)}
          onChange={(e) => console.log('Drag ended:', e.detail.value)}
          style={{ marginTop: '10px' }}
        />
      </View>
    </View>
  );
}