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

Tuya Design

SliderProgress

Code demo

Unilateral progress bar

Bilateral progress bar

API