SliderWithLine 4.6.0+

SliderWithLine is a slider selector with a dividing line.

Code demo

Slide the selector horizontally

import { SliderWithLine } from 'tuya-panel-kit'

<SliderWithLine
  stepValue={1}
  onSlidingComplete={value => console.log(value, 'res')}
  style={{ marginBottom: 20 }}
  nounWidth={2}
  nounColor="#F84803"
  activeNounColor="#fff"
  backgroundColor="#E5E5E5"
  activeBackgroundColor="#F84803"
/>
<SliderWithLine
  stepValue={10}
  maxValue={80}
  minDisabled={false}
  onSlidingComplete={value => console.log(value, 'res')}
  nounColor="#F84803"
  activeNounColor="#fff"
  backgroundColor="#E5E5E5"
  activeBackgroundColor="#F84803"
/>

Slide the selector vertically

import { SliderWithLine, Utils } from 'tuya-panel-kit'

const { convertX: cx } = Utils.RatioUtils;

<SliderWithLine
  horizontal={false}
  onSlidingComplete={value => console.log(value, 'res')}
  nounColor="#F84803"
  activeNounColor="#fff"
  backgroundColor="#E5E5E5"
  activeBackgroundColor="#F84803"
  nounWidth={cx(14)}
  nounHeight={cx(1)}
  width={cx(60)}
  height={cx(327)}
  style={{ marginRight: 20 }}
/>
<SliderWithLine
  minDisabled={false}
  stepValue={10}
  horizontal={false}
  minValue={10}
  nounColor="#F84803"
  activeNounColor="#fff"
  backgroundColor="#E5E5E5"
  activeBackgroundColor="#F84803"
  maxValue={80}
  onSlidingComplete={value => console.log(value, 'res')}
  nounWidth={cx(14)}
  nounHeight={cx(1)}
  width={cx(60)}
  height={cx(327)}
/>

Tuya Design

SliderWithLine 4.6.0+

Code demo

Slide the selector horizontally

Slide the selector vertically

API