Skip to main content

Slider

Reusable Slider component

Example​

import {useState} from 'react';

import {createStyles, Slider, Typography, useStyles, View} from '@lad-tech/mobydick-core';

export const SliderWidget = () => {
  const [styles] = useStyles(styleFn);

  const [range, setRange] = useState({low: 0, high: 100});
  const [low, setLow] = useState(0);
  return (
    <View style={styles.container}>
      <Slider
        min={0}
        max={100}
        low={range.low}
        high={range.high}
        step={5}
        onValueChanged={(low, high) => {
          setRange({low, high});
        }}
      />
      <Slider
        min={0}
        max={100}
        step={1}
        low={low}
        disableRange={true}
        onValueChanged={low => {
          setLow(low);
        }}
      />
    </View>
  );
};
const styleFn = createStyles(({spaces}) => ({
  container: {gap: spaces.Space8},
}));

Props​

View Props​

Inherits View Props.

Required
min​

TYPE
number

Min value for Slider

Required
max​

TYPE
number

Max value for Slider

Required
step​

TYPE
number

Step between slider changes

low​

TYPE
number

Slider low value

high​

TYPE
number

Slider high value

minRange​

TYPE
number

minRange between slider low and high

disableRange​

TYPE
boolean

Use only low inside slider

disabled​

TYPE
boolean

Disable slider changes

onValueChanged​

TYPE
(low: number, high: number, byUser: boolean) => void;

Detect changes by slider

hitSlop​

TYPE
Insets

HitSop for slider controls