SliderProgress

SliderProgress is a sliding progress bar component that supports unilateral or bilateral drag to set the progress.

Code demo

Unilateral progress bar

import { SliderProgress } from 'tuya-panel-kit'
const [state, set] = React.useState({ value: 6 });
const setState = value => set({ ...state, ...value });
<SliderProgress
activeColor="#F82B00"
inactiveColor="#D8D8D8"
value={state.value}
onValueChange={v => setState({ value: v })}
/>

Bilateral progress bar

import { SliderProgress } from 'tuya-panel-kit'
const [state, set] = React.useState({ values: [20, 90] });
const setState = value => set({ ...state, ...value });
<SliderProgress
activeColor="#F82B00"
inactiveColor="#D8D8D8"
value={state.values}
style={{ width: 300, height: 33 }}
onValueChange={({ minValue, maxValue }) => {
setState({
values: [minValue, maxValue],
});
}}
/>

API

tuya02:55