@ray-js/components-ty-slider v0.2.42

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);
  }}
/>