A pure JavaScript Slider> component for react-native

Overview

react-native-slider

npm version npm downloads npm licence Platform

A pure JavaScript <Slider> component for react-native. This is still very much a work in progress, ideas and contributions are very welcome.

It is a drop-in replacement for Slider.

Install

npm i --save react-native-slider

Note: I try to maintain backward compatibility of this component with previous versions of React Native, but due to the nature of the platform, and the existence of breaking changes between releases, it is possible that you need to use a specific version of this component to support the exact version of React Native you are using. See the following table:

React Native version(s) Supporting react-native-slider version(s)
<0.25.0 <0.7.0
v0.25.x v0.7.x
v0.26.0+ v0.8.x
v0.43.0+ v0.10.x
v0.44.0+ v0.11.x

Usage

import React from "react";
import Slider from "react-native-slider";
import { AppRegistry, StyleSheet, View, Text } from "react-native";

class SliderExample extends React.Component {
  state = {
    value: 0.2
  };

  render() {
    return (
      <View style={styles.container}>
        <Slider
          value={this.state.value}
          onValueChange={value => this.setState({ value })}
        />
        <Text>
          Value: {this.state.value}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    alignItems: "stretch",
    justifyContent: "center"
  }
});

AppRegistry.registerComponent("SliderExample", () => SliderExample);

Try this example live on Expo Snack.

Props

Prop Type Optional Default Description
value number Yes 0 Initial value of the slider
disabled bool Yes false If true the user won't be able to move the slider
minimumValue number Yes 0 Initial minimum value of the slider
maximumValue number Yes 1 Initial maximum value of the slider
step number Yes 0 Step value of the slider. The value should be between 0 and maximumValue - minimumValue)
minimumTrackTintColor string Yes '#3f3f3f' The color used for the track to the left of the button
maximumTrackTintColor string Yes '#b3b3b3' The color used for the track to the right of the button
thumbTintColor string Yes '#343434' The color used for the thumb
thumbTouchSize object Yes {width: 40, height: 40} The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily.
onValueChange function Yes Callback continuously called while the user is dragging the slider
onSlidingStart function Yes Callback called when the user starts changing the value (e.g. when the slider is pressed)
onSlidingComplete function Yes Callback called when the user finishes changing the value (e.g. when the slider is released)
style style Yes The style applied to the slider container
trackStyle style Yes The style applied to the track
thumbStyle style Yes The style applied to the thumb
thumbImage source Yes Sets an image for the thumb.
debugTouchArea bool Yes false Set this to true to visually see the thumb touch rect in green.
animateTransitions bool Yes false Set to true if you want to use the default 'spring' animation
animationType string Yes 'timing' Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties.
animationConfig object Yes undefined Used to configure the animation parameters. These are the same parameters in the Animated library.

MIT Licensed

Comments
  • Thumb is above the track?

    Thumb is above the track?

    Am I the only one having this kind of issue?

    screen shot 2017-03-08 at 6 30 51 pm

    Also note that the back track is gone.

    Here is my code: (Footer comes from native-base)

    <Footer style={{
        backgroundColor: '#7DC265',
    }}>
                <Slider
                    style={{ flex: 1, alignSelf: 'stretch', margin: 10, alignItems: 'baseline' }}
                    minimumValue={0} maximumValue={100}
                    value={volume}
                    trackStyle={{
                        height: 4,
                        borderRadius: 2,
                    }}
                    thumbStyle={{
                        width: 15,
                        height: 15,
                        backgroundColor: 'white',
                        borderColor: '#30a935',
                        borderWidth: 2
                    }}
                    minimumTrackTintColor='#30a935'
                    onValueChange={value => debounce(volumeChange(value), 150)}
                />
    </Footer>
    

    I'm using:

        "native-base": "^2.0.12",
        "react-native": "0.42.0",
        "react-native-elements": "^0.9.7",
        "react-native-vector-icons": "^4.0.0",
    
    opened by vincentaudebert 18
  • Use Animated instead of setState

    Use Animated instead of setState

    Right now using setState is fairly inefficient as you need to reconcile the entire component again on each frame of the touch -- if you were to use Animated the performance would much much smoother. Noticed this on a Nexus 5.

    opened by brentvatne 14
  • Constant rerenders on Android

    Constant rerenders on Android

    The Slider keeps rerendering on Android, resulting in bad performance when adding more Sliders.

    Using 1 Slider: https://a.pomf.cat/nqxmdv.mp4 An extreme example: https://a.pomf.cat/jowuvd.mp4

    opened by cornedor 10
  • Vertical orientation support

    Vertical orientation support

    It's not particularly pretty, but I have made a start on adding support. Maybe there is a more generic way of supporting vertical orientations. There are lots of ugly if (orientation === 'horizontal')s.

    Maybe not appropriate for this repo as it would no longer be a drop in replacement for <ReactNative.Slider>.

    opened by joefocusrite 9
  • Add support for

    Add support for "step" property

    This is not a drop-in replacement for SliderIOS. SliderIOS supports the "step" property, which allows you to define the allowable values generated by the slider (in between your min and max). See https://facebook.github.io/react-native/docs/sliderios.html#step. I would love to use this component if support was added for the "step" property.

    opened by anaximander 9
  • Consider transpiling npm package to ES5

    Consider transpiling npm package to ES5

    I found that it's impractical to use this package for web apps because it uses ES6/7 features and doesn't transpile to ES5 before publishing to npm. It's common for web apps to skip transpiling their node_modules dependencies.

    opened by necolas 8
  • Track doesn't align in RN0.39

    Track doesn't align in RN0.39

    Hi, I've noticed the track doesn't align properly in React Native 0.39.

    <Slider
      style={{width: 300}}
      value={this.state.value}
      minimumTrackTintColor='#FF0000'
      maximumTrackTintColor='#00FF00'
      thumbTintColor='#0000FF'
      minimumValue={0}
      maximumValue={10}
      onValueChange={(value) => this.setState({value})} />
    

    As a short term fix, I've found that providing trackStyle={{marginTop: -4}} fixes the issue, but I suspect changing defaultStyles to include the fix would be a better solution.

    Here's a screenshot of the bug... screen shot 2016-12-05 at 15 46 06

    opened by Thomas101 7
  • Events don't fire with onPanResponderTerminationRequest: () => false

    Events don't fire with onPanResponderTerminationRequest: () => false

    Hi.

    I have the problem: slider stops work if I add these lines

     componentWillMount() {
            this._panResponder = PanResponder.create({
                onPanResponderTerminationRequest: () => false,
                onStartShouldSetPanResponderCapture: () => true,
            });
    

    If I correctly understand it's because PanResponder is used inside slider and code above will prevent events form bubbling. But I need this code for my parent component (it's a panel with some other components inside and you can drag it up or down) because I don't want to make drag event work on slider component.

    Here is my code:

    class Filter extends Component {
        state = {
            value: 1,
        }
    
        componentWillMount() {
            this._panResponder = PanResponder.create({
                // prevent drag event from parent component
                onPanResponderTerminationRequest: () => false,
                onStartShouldSetPanResponderCapture: () => true,
            });
        }
    
        render() {
            return (
                <View style={styles.filterWrap} {...this._panResponder.panHandlers} >
                    <Slider
                        step={1}
                        trackStyle={styles.track}
                        thumbStyle={styles.thumb}
                        minimumValue={0}
                        maximumValue={2}
                        minimumTrackTintColor='rgba(0,0,0,0)'
                        maximumTrackTintColor='rgba(0,0,0,0)'
                        thumbTintColor='#fff'
                        style={styles.slider}
                        value={this.state.value}
                        onValueChange={(value) => this.setState({value})} />
                </View>
            );
        }
    }
    

    Is there any way to prevent events from my parent component on Slider component and enable events in slider PanResponder?

    opened by alexHlebnikov 7
  • Set rendertohardwaretextureandroid

    Set rendertohardwaretextureandroid

    This seems to make dragging the slider more responsive on android devices. These views tend to be small so the memory footprint is hopefully small. Thoughts?

    opened by slycoder 6
  • Add setValue() function to allow you to change slider value programatically

    Add setValue() function to allow you to change slider value programatically

    I'm using the slider as a video player scrubber, so I needed to increment the slider's value in code every second. This function allows me to do so. I added this.state.sliding so that calls to setValue() while the user is dragging the thumb are ignored. I also go ahead and set the slider to the maximumValue if the value passed to setValue() is within 1 or greater than the maximumValue.

    opened by marcshilling 6
  • Is there a way to lock the slider?

    Is there a way to lock the slider?

    I have a use case where I want to show the slider, but i dont want the user to be able to move the slider. Is there any way that I can implement my use case with the current compoment as it is?. If not, is there any plan to support this feature?

    opened by manask88 5
  • Error when used with latest rn, ViewPropTypes has be deprecated

    Error when used with latest rn, ViewPropTypes has be deprecated

    Hi! ๐Ÿ‘‹

    Firstly, thanks for your work on this project! ๐Ÿ™‚

    Today I used patch-package to patch [email protected] for the project I'm working on.

    Here is the diff that solved my problem:

    diff --git a/node_modules/react-native-slider/lib/Slider.js b/node_modules/react-native-slider/lib/Slider.js
    index c640410..aae12fc 100644
    --- a/node_modules/react-native-slider/lib/Slider.js
    +++ b/node_modules/react-native-slider/lib/Slider.js
    @@ -5,6 +5,7 @@ var _react=require("react");var _react2=_interopRequireDefault(_react);
     
     
     var _reactNative=require("react-native");
    +var _reactNativePropTypes=require("deprecated-react-native-prop-types");
     
     
     
    @@ -548,14 +549,6 @@ return false;}}]);return Slider;}(_react.PureComponent);Slider.propTypes={ /**
          * Callback called when the user finishes changing the value (e.g. when
          * the slider is released).
          */onSlidingComplete:_propTypes2.default.func, /**
    -     * The style applied to the slider container.
    -     */style:_reactNative.ViewPropTypes.style, /**
    -     * The style applied to the track.
    -     */trackStyle:_reactNative.ViewPropTypes.style, /**
    -     * The style applied to the thumb.
    -     */thumbStyle:_reactNative.ViewPropTypes.style, /**
    -     * Sets an image for the thumb.
    -     */thumbImage:_reactNative.Image.propTypes.source, /**
          * Set this to true to visually see the thumb touch rect in green.
          */debugTouchArea:_propTypes2.default.bool, /**
          * Set to true to animate values with default 'timing' animation type
    diff --git a/node_modules/react-native-slider/src/Slider.js b/node_modules/react-native-slider/src/Slider.js
    index 37deee5..45e6506 100644
    --- a/node_modules/react-native-slider/src/Slider.js
    +++ b/node_modules/react-native-slider/src/Slider.js
    @@ -11,8 +11,8 @@ import {
       PanResponder,
       View,
       Easing,
    -  ViewPropTypes
     } from "react-native";
    +import { ViewPropTypes, ImagePropTypes } from "deprecated-react-native-prop-types";
     
     import PropTypes from 'prop-types';
     
    @@ -146,7 +146,7 @@ export default class Slider extends PureComponent {
         /**
          * Sets an image for the thumb.
          */
    -    thumbImage: Image.propTypes.source,
    +    thumbImage: ImagePropTypes.source,
     
         /**
          * Set this to true to visually see the thumb touch rect in green.
    

    This issue body was partially generated by patch-package.

    opened by shrynshjn 0
  • Move ViewPropTypes from react-native to deprecated-react-native-prop-types

    Move ViewPropTypes from react-native to deprecated-react-native-prop-types

    Importing ViewPropTypes from react-native is throwing the below error and the project is not running.

    ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

    This PR will move ViewPropTypes from 'react-native' to 'deprecated-react-native-prop-types' and should resolve this issue.

    opened by arunnambissan 1
  • Fix for react native version 0.69+

    Fix for react native version 0.69+

    Hi! ๐Ÿ‘‹

    Firstly, thanks for your work on this project! ๐Ÿ™‚

    Today I used patch-package to patch [email protected] for the project I'm working on.

    After updating react native version to 0.69, they removed PropTypes from react-native, because of that there was breaking changes, since this package was using that. The changes was simply updating imports from "react-native" to ""deprecated-react-native-prop-types".

    Here is the diff that solved my problem:

    diff --git a/node_modules/react-native-slider/lib/Slider.js b/node_modules/react-native-slider/lib/Slider.js
    index c640410..83003ce 100644
    --- a/node_modules/react-native-slider/lib/Slider.js
    +++ b/node_modules/react-native-slider/lib/Slider.js
    @@ -5,6 +5,7 @@ var _react=require("react");var _react2=_interopRequireDefault(_react);
     
     
     var _reactNative=require("react-native");
    +var _reactNativePropTypes=require("deprecated-react-native-prop-types");
     
     
     
    @@ -555,7 +556,7 @@ return false;}}]);return Slider;}(_react.PureComponent);Slider.propTypes={ /**
          * The style applied to the thumb.
          */thumbStyle:_reactNative.ViewPropTypes.style, /**
          * Sets an image for the thumb.
    -     */thumbImage:_reactNative.Image.propTypes.source, /**
    +     */thumbImage:_reactNativePropTypes.ImagePropTypes.source, /**
          * Set this to true to visually see the thumb touch rect in green.
          */debugTouchArea:_propTypes2.default.bool, /**
          * Set to true to animate values with default 'timing' animation type
    diff --git a/node_modules/react-native-slider/src/Slider.js b/node_modules/react-native-slider/src/Slider.js
    index 37deee5..45e6506 100644
    --- a/node_modules/react-native-slider/src/Slider.js
    +++ b/node_modules/react-native-slider/src/Slider.js
    @@ -11,8 +11,8 @@ import {
       PanResponder,
       View,
       Easing,
    -  ViewPropTypes
     } from "react-native";
    +import { ViewPropTypes, ImagePropTypes } from "deprecated-react-native-prop-types";
     
     import PropTypes from 'prop-types';
     
    @@ -146,7 +146,7 @@ export default class Slider extends PureComponent {
         /**
          * Sets an image for the thumb.
          */
    -    thumbImage: Image.propTypes.source,
    +    thumbImage: ImagePropTypes.source,
     
         /**
          * Set this to true to visually see the thumb touch rect in green.
    

    This issue body was partially generated by patch-package.

    opened by rossicler-hostalky 0
  • Fix a warning for useNativeDirver

    Fix a warning for useNativeDirver

    Hi! ๐Ÿ‘‹

    Firstly, thanks for your work on this project! ๐Ÿ™‚

    Today I used patch-package to patch [email protected] for the project I'm working on.

    Here is the diff that solved my problem:

    diff --git a/node_modules/react-native-slider/lib/Slider.js b/node_modules/react-native-slider/lib/Slider.js
    index c640410..fad8f26 100644
    --- a/node_modules/react-native-slider/lib/Slider.js
    +++ b/node_modules/react-native-slider/lib/Slider.js
    @@ -420,7 +420,7 @@ _this.props.animationConfig,
     {toValue:value});
     
     
    -_reactNative.Animated[animationType](_this.state.value,animationConfig).start();},_this.
    +_reactNative.Animated[animationType](_this.state.value,{...animationConfig, useNativeDriver: false}).start();},_this.
     
     
     _fireChangeEvent=function(event){
    diff --git a/node_modules/react-native-slider/src/Slider.js b/node_modules/react-native-slider/src/Slider.js
    index 37deee5..6234b20 100644
    --- a/node_modules/react-native-slider/src/Slider.js
    +++ b/node_modules/react-native-slider/src/Slider.js
    @@ -420,7 +420,7 @@ export default class Slider extends PureComponent {
           {toValue : value}
         );
     
    -    Animated[animationType](this.state.value, animationConfig).start();
    +    Animated[animationType](this.state.value, {...animationConfig, useNativeDriver: false}).start();
       };
     
       _fireChangeEvent = (event) => {
    

    This issue body was partially generated by patch-package.

    opened by shixiaoquan 0
  • Fix a warnning for useNativeDriver

    Fix a warnning for useNativeDriver

    Hi! ๐Ÿ‘‹

    Firstly, thanks for your work on this project! ๐Ÿ™‚

    Today I used patch-package to patch [email protected] for the project I'm working on.

    Here is the diff that solved my problem:

    diff --git a/node_modules/react-native-slider/lib/Slider.js b/node_modules/react-native-slider/lib/Slider.js
    index c640410..fad8f26 100644
    --- a/node_modules/react-native-slider/lib/Slider.js
    +++ b/node_modules/react-native-slider/lib/Slider.js
    @@ -420,7 +420,7 @@ _this.props.animationConfig,
     {toValue:value});
     
     
    -_reactNative.Animated[animationType](_this.state.value,animationConfig).start();},_this.
    +_reactNative.Animated[animationType](_this.state.value,{...animationConfig, useNativeDriver: false}).start();},_this.
     
     
     _fireChangeEvent=function(event){
    diff --git a/node_modules/react-native-slider/src/Slider.js b/node_modules/react-native-slider/src/Slider.js
    index 37deee5..dd48dc5 100644
    --- a/node_modules/react-native-slider/src/Slider.js
    +++ b/node_modules/react-native-slider/src/Slider.js
    @@ -420,7 +420,7 @@ export default class Slider extends PureComponent {
           {toValue : value}
         );
     
    -    Animated[animationType](this.state.value, animationConfig).start();
    +    Animated[animationType](this.state.value, {...animationConfig, useNativeDriver: true}).start();
       };
     
       _fireChangeEvent = (event) => {
    

    This issue body was partially generated by patch-package.

    opened by shixiaoquan 0
Releases(0.11.0)
  • 0.11.0(Aug 4, 2017)

  • 0.10.0(Jun 3, 2017)

  • 0.9.1(Aug 22, 2016)

  • 0.9.0(Jun 13, 2016)

  • 0.8.0(May 27, 2016)

  • 0.7.1(May 17, 2016)

  • 0.7.0(May 12, 2016)

  • 0.6.1(Apr 27, 2016)

  • 0.6.0(Apr 27, 2016)

    New features

    • Performance improvements (no more re-render while dragging the thumb): 3eba74faaaa82004957de632eccc8719e6c13e3b

    Bug fixes

    • Android: touch interaction has to start from the thumb to be able to move it: 8e98fb0c76687687423662e4177396697c4ba28e
    Source code(tar.gz)
    Source code(zip)
  • 0.5.3(Apr 21, 2016)

  • 0.5.2(Apr 6, 2016)

    Bug fixes

    • Fixed issues with other view (like the Navigator) stealing the responder and becoming interactive while the user is dragging the slider: e41a9354e116a03798af1e5e38539a48c784796a (thanks @cridenour)
    Source code(tar.gz)
    Source code(zip)
  • 0.5.1(Apr 5, 2016)

    New features

    • Added disabled prop: 4656a3193fb4e1729ab5b0551b77350a04aa2344 (thanks @manask88)
    • Added step prop: a5a9ed4d93ae99866711565cf572c2257cc17a51 (thanks @rreusser)

    Bug fixes

    • Fixed crash: fc53b4be6e9d495f880d60b34c406aae5037672a (thanks @skevy)
    • Removed react-native from peerDependencies: b9ad5fc2ec62d2a12ddb27f56c95c68ac73f588b (thanks @brentvatne)
    Source code(tar.gz)
    Source code(zip)
Owner
Jean Regisser
Jean Regisser
:level_slider: Yet another, big one, pure JS easily customisable and hackable react-native slider component

react-native-big-slider This package powers Yeti Smart Home and is used in production. A react native reusable and efficient dial knob element. Usage

Netbeast 88 Oct 31, 2022
Slider-captcha-react - Slider or point Captcha built with react and typescript

Captcha inspire AJ-Captcha to react, slider or point Getting Started Install dep

null 2 Oct 16, 2022
react native toast like component, pure javascript solution

react-native-root-toast Features Pure javascript solution. Support both Android and iOS. Lots of custom options for Toast. You can show/hide Toast by

Horcrux 1.8k Dec 23, 2022
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.

react-native-gesture-password A gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure Ja

null 543 Dec 22, 2022
A pure javascript masked text and input text component for React-Native.

react-native-masked-text This is a simple masked text (normal text and input text) component for React-Native. Alert Hey guys! Unfortunatelly I'm not

Ben-hur Santos Ott 1.6k Dec 30, 2022
A pure JavaScript solution for react native`s modal component

react-native-root-modal Features Pure javascript solution, easy to install. Support both React element way and javascript class way to invoke, easy to

Horcrux 360 Oct 12, 2022
Pure JavaScript material menu component for React Native

react-native-material-menu ยท Pure JavaScript material menu component for React Native with automatic RTL support. Install Using yarn yarn add react-na

Maksim Milyutin 460 Jan 3, 2023
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

X  Fruit Team 77 Nov 11, 2022
Pure javascript autocomplete input for react-native

react-native-autocomplete-input A pure JS autocomplete component for React Native. Use this component in your own projects or use it as inspiration to

Laurence Bortfeld 743 Jan 8, 2023
Pure JavaScript React-Native dialog

react-native-dialog A pure JavaScript React-Native dialog that follows closely the UI of its native counterpart while expanding its features. Features

Matteo Mazzarolo 572 Dec 27, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
Arc Slider Component for React Native using React Native SVG

React Native Arc Slider ?? Getting Started Install Install the library and react-native-svg npm i --save rn-arc-slider react-native-svg Link native co

Arpit Bhalla 26 Sep 28, 2022
Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | ็ฎ€ไฝ“ไธญๆ–‡ Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

null 136 Dec 30, 2022
:raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions.

react-native-masonry ?? An easy to use, pure JS react-native component to render a masonry~ish layout for remote images react-native-masonry is built

Brandon Him 1.3k Jan 6, 2023
Flexible and lightweight React Native component for UITableView made with pure CSS

react-native-tableview-simple ?? This component is used in my production app Game ideas. Make sure to check it out! ?? This cross-platform component i

Patrick Puritscher 460 Dec 2, 2022
A pure React Native Component for circular progress bars

React-Native-CircularProgress A pure React Native Component for circular progress bars for iOS. Demo Installation Install library npm i --save react-n

Andy Chrzaszcz 44 Dec 28, 2020
React Native Slider component with two markers based on NMRangeSlider.

Native iOS multi slider component for React Native Native iOS multi slider component for React Native with two markers based on NMRangeSlider. react-n

Enrise 34 Oct 8, 2022
Staggered Or Masonary List View For React Native Written in pure js

react-native-masonry-brick-list this is a staggered List view for react native (pure Js) Installation $ npm install react-native-masonry-brick-list --

Sajjad Asadi 24 Apr 28, 2021
React Native Designed View Pager Library (pure js)

install react-native-fancy-carousel-viewpager Getting started $ npm install react-native-fancy-carousel-viewpager --save Usage import React, {Componen

Sajjad Asadi 12 Jul 3, 2022