Slider

Component that is based on @react-native-community/slider library.

https://github.com/callstack/react-native-slider (opens in a new tab)

Import

import { Slider } from 'react-native-ficus-ui';

Usage

Default

EDITABLE EXAMPLE

<Box>
  <Slider />
  <Slider colorScheme="green" defaultValue={0.2} />
  <Slider colorScheme="red" defaultValue={0.3} />
  <Slider colorScheme="orange" defaultValue={0.5} />
  <Slider colorScheme="pink" filledTrackColor="pink.100" />
</Box>

Change value

EDITABLE EXAMPLE

const SimpleSlider = () => {
  const [value, setValue] = React.useState(0.2);

  return (
    <Box>
      <Text>Slider value : {Math.round(value * 100) / 100}</Text>
      <Slider colorScheme="teal" value={value} onValueChange={setValue} />
    </Box>
  );
}
render(<SimpleSlider />)

Custom step

EDITABLE EXAMPLE

<Slider colorScheme="orange" step={0.2} />

Props

Extends every Box props and SliderProps from @react-native-community/slider

https://github.com/callstack/react-native-slider/blob/main/package/typings/index.d.ts (opens in a new tab)

`colorScheme`

The colorScheme property, will define slider main color

Type	Required
string	No

`filledTrackColor`

The filled track color of the slider.

Type	Required
string	No

`min`

The minimum value of the slider input.

Type	Required	Default
number	No	0

`max`

The maximum value of the slider input.

Type	Required	Default
number	No	1

`defaultValue`

The default value of the slider input.

Type	Required
number	No

PinInput Box