slider

React Native Slider

This lightweight version of a slider is fully compatible with React-Native and React-Native-Web. It also provides support for Range slider (with 2 thumbs) and custom thumb rendering.

• Same API as @react-native-community/slider (with some more features of course!)
• lightweight
• Range slider for sliders with min and max values
• Supports for React-Native-Web
• No extra dependencies!
• As official as @react-native-community/slider. Now named @callstack/slider, it is actually not maintained by the community. Thus, you should not worry about switching library for a better implementation if it meets your needs.

Try it here!

Have a look at the troubleshooting section if you encounter any issue, or open an issue.

Install

npm i -S @react-native-assets/slider

Usage

Slider

You can see below the available props with their respective default values.

…

Range Slider

You can see below the available props with their respective default values

…

Troubleshooting

• The slider is hard to move around

The component is probably too narrow. Increase the height of the component to ensure a correct touch area

Slider V11

Changelog V 11.0.0:

• Breaking change: Replace CustomMark prop with StepMarker prop so we follow the same API as @callstack/slider in order to ease migration
• Touch events stop propagation to avoid conflicting interactions with parent components

Changelog V 10.0.0:

• Fix the implementation of the CustomMark optional component. It had a wrong size and wrong position
• Use a size of 1px for the thumb container because 0 was breaking accessibility

Slider V9

Changelog V 9.1.0:

• It is now possible to provide a custom CustomTrack component to render the track

Changelog V 9.0.0:

• You can prevent the slider from updating its value by returning false from the onValueChange callback
• The default values have been changed for the RangeSlider component

Changelog V 8.0.0:

• Wrapped the slider in a ResponderView to enable touch events on the padding area

Changelog V 7.2.0:

• Improve key navigation and accessibility on range slider
• Move the focusable area on the Thumb instead of the ResponderView

Changelog V 7.1.0:

• Fix the slider value when using step > 1 and minimumValue != 0
• Prevent rerenders in the RangeSlider if the provided value prop has the same bounds as the current range

Changelog V 7.0.0:

• Add CustomMark prop to provide your own component to render the places where the thumb can stop
• Wrap the Responder view inside a wrapper to provide more accurate control over the component

Changelog V 6.0.0:

• Call prevent default on mouse events to avoid weird interactions
• Improve performances
• Add a padding around the RangeSlider too

Changelog V 5.6.3:

• Fix Slider value not updating when provided through props
• Fix a performance issue

Changelog V 5.5.1:

• Fix usage step with minimumValue or maximumValue that don't match the step decimal precision
• Increase the tolerance when using slideOnTap={false}
• Fix value not updating when providing new data to range prop in RangeSlider

Changelog V 5.4.0:

• Adding support for thumbImage prop (please report if you encounter an issue with it)
• Fix slider breaking when providing your own onLayout callback

Changelog V 5.3.0:

• new minTrackStyle prop on Slider and RangeSlider
• new maxTrackStyle prop on Slider and RangeSlider
• new midTrackStyle prop on RangeSlider

Changelog V 5.2.0:

• Adding a default padding of 10 on the ResponderView so that the touches events are more easily catched by the slider.

Changelog V 5.1.0:

• new crossingAllowed prop on RangeSlider
• new minimumRange prop on RangeSlider

Changelog V 5.0.0:

• Remove AnimatedSlider and AnimatedRangeSlider
• new slideOnTap prop
• performance boost

If you have any issue, please fill an issue on our repo