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


const SimpleSlider = () => {
  const bgColor = useColorModeValue("gray.50", "gray.800");

  return (
    <Box bg={bgColor} p="md">
      <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>
  );
}
render(<SimpleSlider />)

Change value

EDITABLE EXAMPLE

const SimpleSlider = () => {
  const [value, setValue] = React.useState(0.2);
  const bgColor = useColorModeValue("gray.50", "gray.800");

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

Custom step

EDITABLE EXAMPLE


const SimpleSlider = () => {
  const bgColor = useColorModeValue("gray.50", "gray.800");

  return (
    <Box bg={bgColor} p="md">
      <Slider colorScheme="orange" step={0.2} />
    </Box>
  );
}
render(<SimpleSlider />)

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 the slider's main color.

Type	Required	Default
string	No

`filledTrackColor`

The filled track color of the slider.

Type	Required	Default
string	No

`min`

The minimum value of the slider input.

Type	Required	Default
number	No

`max`

The maximum value of the slider input.

Type	Required	Default
number	No

`defaultValue`

The default value of the slider input.

Type	Required	Default
number	No

Select Switch