@ray-js/components-ty-slider

English | 简体中文

@ray-js/components-ty-slider

涂鸦风格滑动条

Installation

$ npm install @ray-js/components-ty-slider
# or
$ yarn add @ray-js/components-ty-slider

Usage

NormalSlider

<Slider />

NormalSlider Custom Style & Props

<Slider
  step={25}
  isShowTicks
  maxTrackHeight="8px"
  maxTrackRadius="8px"
  minTrackHeight="8px"
  minTrackColor="linear-gradient(to right, #158CFB, orange)"
  maxTrackTickHeight="4px"
  maxTrackTickWidth="4px"
  maxTrackTickRadius="2px"
  minTrackTickHeight="4px"
  minTrackTickWidth="4px"
  minTrackTickRadius="2px"
/>

NormalSlider showValue

<View style={{ display: 'flex', alignItems: 'center' }}>
  <Slider value={value} onChange={onChange} maxTrackColor="orange" />
  <View style={{ marginLeft: '4px' }}>
    <Text>{value}</Text>
  </View>
</View>

PrettoSlider

<Slider
  maxTrackHeight="26px"
  maxTrackRadius="26px"
  minTrackHeight="22px"
  minTrackWidth="22px"
  thumbWidth="18px"
  thumbHeight="18px"
/>

PrettoSlider Custom Style & Props

<Slider
  maxTrackHeight="26px"
  maxTrackRadius="6px"
  minTrackHeight="22px"
  minTrackWidth="10px"
  thumbWidth="3px"
  thumbHeight="16px"
  thumbRadius="1.5px"
/>

ScaleSlider

<Slider
  isShowTicks
  step={25}
  maxTrackHeight="40px"
  maxTrackRadius="16px"
  minTrackWidth="40px"
  minTrackHeight="40px"
  thumbWidth="0px"
/>

Vertical Slider

// NormalSlider
<Slider
  isVertical
  maxTrackWidth="4px"
  maxTrackHeight="200px"
  minTrackWidth="4px"
  minTrackHeight="28px"
  style={{ marginRight: '30px' }}
/>
// PrettoSlider
<Slider
  isVertical
  maxTrackWidth="26px"
  maxTrackHeight="200px"
  maxTrackRadius="26px"
  minTrackWidth="22px"
  minTrackHeight="22px"
  thumbWidth="18px"
  thumbHeight="18px"
  style={{ marginRight: '30px' }}
/>
// ScaleSlider
<Slider
  isVertical
  isShowTicks
  step={25}
  maxTrackWidth="40px"
  maxTrackHeight="200px"
  maxTrackRadius="16px"
  minTrackWidth="40px"
  minTrackHeight="40px"
  thumbWidth="0px"
  maxTrackTickWidth="12px"
  maxTrackTickHeight="4px"
  minTrackTickWidth="12px"
  minTrackTickHeight="4px"
/>

Prevent Page Scroll

If you need to prevent the page from scrolling, you can use ScrollView as the root node.

const [value, setValue] = React.useState(0);
const [isScrollY, setIsScrollY] = React.useState(true);

const onChange = (event: number) => {
  setValue(event);
};
const onBeforeChange = () => {
  setIsScrollY(false);
};
const onAfterChange = () => {
  setIsScrollY(true);
};
<ScrollView className={{ width: '100%', height: '100vh' }} scrollY={isScrollY}>
  <Slider
    value={value}
    onChange={onChange}
    onBeforeChange={onBeforeChange}
    onAfterChange={onAfterChange}
  />
</ScrollView>;

Sjs Slider

import SjsSlider from '@ray-js/components-ty-slider/lib/slider';

<SjsSlider
  reverse
  direction="vertical"
  barPad={-4}
  step={1}
  end={value}
  bind:onChange={event => {
    setValue(event.detail.end);
    console.log('onChange', event.detail);
  }}
  bind:onEnd={event => {
    setValue(event.detail.end);
    console.log('onEnd', event.detail);
  }}
  bind:onStart={event => {
    setValue(event.detail.end);
    console.log('onStart', event.detail);
  }}
/>

Frequently Asked Questions

When the slider is dragged, it stutters and shakes. Please check if it's written as an uncontrolled component. Try to use onAfterChange to update value. The recommended way to write it is as follows:

export default () => {
  const [value, setValue] = useState(10) // onAfterChange Update after dragging ends
  const [showValue, setShowValue] = useState(10) // For real-time demonstration purposes only

  return (
    <>
      <View>Current value:{showValue}</View>
      <Slider
        value={value}
        onChange={(newValue) => {
          setShowValue(newValue)
        }}
        onAfterChange={setValue} // Triggered when the slider is released
      />
    </>
  )
}