React Native Slider: Selecting a Value from a Range

WHY IT EXISTS Apps often need users to select a value from a continuous or discrete range, like setting a price filter from 10 to 1000. Forcing users to type a number is less intuitive and more error-prone than a visual control. The slider solves this by providing a familiar, draggable interface for selecting a value within set boundaries.

THE MENTAL MODEL Think of a slider as a digital version of a physical dimmer switch or a volume fader on a mixing board. You define the start (minimumValue) and end (maximumValue) of a track, and the user drags a "thumb" along it to select a single value within that range. It visually represents the entire range and the user's current position within it.

HOW IT WORKS The @react-native-community/slider component wraps the native UI elements for sliders on iOS (UISlider) and Android (SeekBar). You render it with several key props. minimumValue and maximumValue set the boundaries. value sets the current position, which should be tied to your component's state. As the user drags the thumb, the onValueChange callback fires continuously with the new value. You must use this callback to update your state, which in turn re-renders the slider at its new position, creating a controlled component.

WHEN TO USE IT Use a slider when the user needs to select a value from a known, bounded range, and high precision is not the top priority. It's ideal for settings like volume, brightness, playback progress, or filter controls (e.g., "distance from me"). It offers a better user experience than a text input for these scenarios.

WHEN NOT TO USE IT Avoid sliders when a precise, specific number is required, like entering a PIN or a birth year. It's also a poor choice for selecting from a very small set of discrete options (2-4 items), where radio buttons or a segmented control would be clearer. If the range of values is enormous and requires precision, a text input is better.

ONE CANONICAL EXAMPLE To create a slider that controls a value between 0 and 100, you first need a state variable, let's call it sliderValue, initialized to a default. You render the Slider component, passing minimumValue={0} and maximumValue={100}. Crucially, you set its value prop to your sliderValue state variable. Then, you provide the onValueChange prop with the function that updates your state, for example setSliderValue. This creates a loop where user input updates state, and state updates the UI.