React Native Slider: Selecting a Value from a Range
A slider is a visual control for selecting a numeric value from a range, like a volume knob. Use it for settings like brightness or price filters. The main footgun is forgetting to capture the slider's value in your app's state on value change.
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.
Interview question
How does a React Native Slider typically update and display its current selected value?
- a.The slider manages its own internal state, automatically reflecting user drags without external state updates.
- b.The onValueChange prop directly sets the slider's value prop, triggering an immediate UI update.
- c.The slider's position is determined by the initial value prop and does not change after the component mounts.
- d.The onValueChange callback updates a state variable, and this state variable is then passed back to the slider's value prop.Correct
Why? this is the answer
The card explicitly states that the onValueChange callback must be used to update your component's state, which then re-renders the slider with its new value, making it a controlled component. Option A is a common misconception, as forgetting to update state is described as a 'footgun' and the slider does not manage its own state automatically.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
- #react native
- #ui component
- #mobile dev
- #forms
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles