Slider | NativeBase

NativeBase

3.4.x

🎉 Prompt to React Native UI

→

⌘

Introduction

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

Slider

The Slider is used to allow users to make selections from a range of values.

Import

NativeBase exports 4 slider-related components:

Slider: The wrapper that provides context and functionality for all children.

Slider.Track: The empty part of the slider that shows the track.

Slider.FilledTrack: The filled part of the slider.

Slider.Thumb: The handle that is used to change the slider value.

Copy
import { Slider } from 'native-base';

Examples


Playground
const Example = () => {
  return <Box mx={5} width="80%">
      <Slider defaultValue={70} minValue={0} maxValue={100} accessibilityLabel="hello world" step={10}>
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
    </Box>;
};const Example = () => {
  return <Box mx={5} width="80%">
      <Slider defaultValue={70} minValue={0} maxValue={100} accessibilityLabel="hello world" step={10}>
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
    </Box>;
};

Color


Playground
const Example = () => {
  return <Box mx={5} width="80%">
      <Slider defaultValue={70} colorScheme="red">
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
    </Box>;
};const Example = () => {
  return <Box mx={5} width="80%">
      <Slider defaultValue={70} colorScheme="red">
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
    </Box>;
};

Value


Playground
const Example = () => {
  const [onChangeValue, setOnChangeValue] = React.useState(70);
  const [onChangeEndValue, setOnChangeEndValue] = React.useState(70);
  return <Stack mx={5} space={4} alignItems="center" w="100%">
      <Text>onChangeValue - {onChangeValue}</Text>
      <Text>onChangeEndValue - {onChangeEndValue}</Text>

      <Box mx={5} w="250">
        <Slider defaultValue={70} colorScheme="cyan" onChange={v => {
        setOnChangeValue(Math.floor(v));
      }} onChangeEnd={v => {
        v && setOnChangeEndValue(Math.floor(v));
      }}>
          <Slider.Track>
            <Slider.FilledTrack />
          </Slider.Track>
          <Slider.Thumb />
        </Slider>
      </Box>
    </Stack>;
};const Example = () => {
  const [onChangeValue, setOnChangeValue] = React.useState(70);
  const [onChangeEndValue, setOnChangeEndValue] = React.useState(70);
  return <Stack mx={5} space={4} alignItems="center" w="100%">
      <Text>onChangeValue - {onChangeValue}</Text>
      <Text>onChangeEndValue - {onChangeEndValue}</Text>

      <Box mx={5} w="250">
        <Slider defaultValue={70} colorScheme="cyan" onChange={v => {
        setOnChangeValue(Math.floor(v));
      }} onChangeEnd={v => {
        v && setOnChangeEndValue(Math.floor(v));
      }}>
          <Slider.Track>
            <Slider.FilledTrack />
          </Slider.Track>
          <Slider.Thumb />
        </Slider>
      </Box>
    </Stack>;
};

Size


Playground
const Example = () => {
  return <VStack space={4} width="80%">
      <Slider defaultValue={40} colorScheme="red" size="lg">
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
      <Slider defaultValue={60} size="md">
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
      <Slider defaultValue={80} colorScheme="green" size="sm">
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
    </VStack>;
};const Example = () => {
  return <VStack space={4} width="80%">
      <Slider defaultValue={40} colorScheme="red" size="lg">
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
      <Slider defaultValue={60} size="md">
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
      <Slider defaultValue={80} colorScheme="green" size="sm">
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
    </VStack>;
};

Customised


Playground
const Example = () => {
  return <Box mx={5} width="80%">
      <Slider defaultValue={70} size="lg" colorScheme="orange">
        <Slider.Track bg="orange.100">
          <Slider.FilledTrack bg="green.400" />
        </Slider.Track>
        <Slider.Thumb borderWidth={0} bg="gray.200">
          <Icon as={MaterialIcons} name="park" color="green.500" />
        </Slider.Thumb>
      </Slider>
    </Box>;
};const Example = () => {
  return <Box mx={5} width="80%">
      <Slider defaultValue={70} size="lg" colorScheme="orange">
        <Slider.Track bg="orange.100">
          <Slider.FilledTrack bg="green.400" />
        </Slider.Track>
        <Slider.Thumb borderWidth={0} bg="gray.200">
          <Icon as={MaterialIcons} name="park" color="green.500" />
        </Slider.Thumb>
      </Slider>
    </Box>;
};

Form Controlled


Playground
const Example = () => {
  return <VStack space={4} mx={10} width="80%">
      <FormControl isRequired isInvalid isDisabled>
        <FormControl.Label>Just Slide</FormControl.Label>
        <Slider defaultValue={50}>
          <Slider.Track>
            <Slider.FilledTrack />
          </Slider.Track>
          <Slider.Thumb />
        </Slider>
        <FormControl.HelperText>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>
          Don't worry, it's just an example.
        </FormControl.ErrorMessage>
      </FormControl>
    </VStack>;
};const Example = () => {
  return <VStack space={4} mx={10} width="80%">
      <FormControl isRequired isInvalid isDisabled>
        <FormControl.Label>Just Slide</FormControl.Label>
        <Slider defaultValue={50}>
          <Slider.Track>
            <Slider.FilledTrack />
          </Slider.Track>
          <Slider.Thumb />
        </Slider>
        <FormControl.HelperText>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>
          Don't worry, it's just an example.
        </FormControl.ErrorMessage>
      </FormControl>
    </VStack>;
};