@ray-js/components-ty-slider
v0.2.50
Published
涂鸦风格滑动条
Downloads
1,160
Readme
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);
}}
/>