react-bootstrap-slider
Advanced tools
This project was bootstrapped with Create React App. It was then ejected due to jQuery issue (see below).
A ReactJS wrapper for seiyria's Bootstrap Slider component using Bootstrap 3.
Bootstrap 4 is not currently supported, but is under investigation. I am dependent on upstream issues to be resolved first, see #689 and #856 on the Bootstrap Slider Github repository.
Install from npm with:
npm install --save react-bootstrap-slider
or
yarn add react-bootstrap-slider
Import like so for ES6:
import ReactBootstrapSlider from 'react-bootstrap-slider';
The control is implemented in UMD format, so should also work for AMD/RequireJS, but I've not tested that.
React, React Dom and Bootstrap are listed as peer dependencies (peerDependencies section in package.json) for react-bootstrap-slider. They will not be installed automatically when you install this component into your own project. You will need to install them yourself, as part of that project, if you have not done so already. This command will install them for you if you don't yet have them:
npm install react react-dom prop-types bootstrap@^3 --save
or
yarn add react react-dom prop-types bootstrap@^3
The bootstrap-slider component - and, therefore, react-bootstrap-slider - will work with jQuery if it detects it in your project setup, but it is not a requirement. It works fine without jQuery. However, if you are using Webpack or Browserify to build your project, you may get a "missing dependency" build error if jQuery is not present. This is a known, upstream issue in bootstrap-slider. Please see How do I exclude the optional JQuery dependency from my build? on the Bootstrap Slider's Readme for how you can workaround this issue. You can also see how I did it by inspecting the /examples/config/webpack.config.js file and searching for "jQuery".
You must also ensure that you have included bootstrap-slider's CSS file in your build, otherwise the control will be blank! You'll also need Bootstrap's own CSS file too, of course. If you're using Webpack, which you will be if you have a Create React App based project, then you can import the CSS file directly into your build, like so:
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-slider/dist/css/bootstrap-slider.css"
Those two imports need to be in your top-level JavaScript file, e.g. App.js.
Or you can simply add the files as links in your HTML file as a link e.g.:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>
checking that the versions match those of Bootstrap and Bootsrap Slider themselves.
Here's an example of how you might call it in your ReactJS's render method:
<ReactBootstrapSlider
value={this.state.currentValue}
change={this.changeValue}
slideStop={this.changeValue}
step={this.state.step}
max={this.state.max}
min={this.state.min}
orientation="vertical"
reversed={true}
disabled="disabled" />
The value, step, max and min parameters should be self-explanatory. The change event is the callback method that will be called when the slider actually changes. (NB: this is the change event for the Bootstrap slider.) As of version 1.1.2, there is a new slideStop event, which only triggers when you've finished moving the slider (i.e. you release it). This makes slideStop a deal less "chatty" than the change event. Decide which one you need; you'll only ever need one or the other (unlike my example code above!).
If the optional parameter disabled is included, and is set to "disabled", then the slider will display in a disabled state. If the parameter is not included, or is set to anything else except "disabled", then the slider control will be enabled.
The default orientation value is 'horizontal', so you only need to include that prop if you want to set it to 'vertical'.
If value is a two member array, then the slider will have two handles: minimum and maximum. You should also pass win a range parameter set to true in this case.
As of version 1.0.5, other values passed into the component will also passed into the underlying bootstrap-slider component via the Object Spread Operator that's been proposed for ES2017 (yes, that's how cutting edge I am!!). See seyria's documentation for a full list of these. Those parameters have not all been tested yet but the reversed parameter definitely works, and I have included this in the demo of the vertical slider.
Version 1.0.6 fixed an issue that prevented ticks props from being rendered. Pass in ticks props like so:
ticks = {[0, 100, 200, 300, 400]}
ticks_labels = {["$0", "$100", "$200", "$300", "$400"]}
ticks_snap_bounds = { 30 }
After cloning the repository from Github, run either:
yarn
or
npm install
in the project's root folder to install the dependencies. Note: React, React Dom, Prop Types and Bootstrap will all be installed this time because they are listed as development dependencies as well as peer dependencies for the project. (Please see discussion on PR43 for why I've listed these packages under both peerDependencies and devDependencies.)
The source code for the component is the /src/react-bootstrap-slider.js file. You'll probably find it easiest to run the example demo (see next section) in order to see any changes that you make to the component's source.
To build a distribution version of the component, it's:
yarn build
or
npm run build
The built version wil be put in the /dist folder.
The Demo is based on Create React App. I had to eject from Create React App though in order to work around the bootstrap-slider component's requirement for either jQuery or a stub of it to be present in the build system (see the jQuery section above).
You need to edit the code in the /examples/src/slider-app-demo.js is the source code for the host Demo page. The /examples folder has its own NPM build steps (i.e. its own package.json file), so you'll have to install the dependencies separately here. So make sure your terminal is in the /examples folder this time, then run either:
yarn
or
npm install
again.
To run the demo in Development mode, from the /examples folder it's:
yarn start
or
npm run start
This should launch your browser and load https://localhost:3000 with the demo running. This version takes its react-bootstrap-slider code from development source code in the /src folder of the project's root folder. So any change that you make to that source code will hotload straight into the demo.
You may notice that the demo source code that it's actually imported via a symlink. This to work around an issue with how the Webpack build treats packages imported from outside of current project's hierarchy. (Note: this will probably not work on Windows. I haven't tested it there.)
To build a Production version of the demo, from the /examples folder again, it's:
yarn build
or
npm run build
This will put a production ready version of the demo in the /examples/build folder. Note: this version will import its react-bootstrap-slider component from the /dist folder of the project's root folder - i.e., the built version of the component. So make sure that you've actually built the component (see above) before building the demo! You must also have installed all the packages (yarn or npm i) in the root folder of the project, so that the slider component can find its local version of React itelf.
Once you've built the Production version of the Demo, you can open it with the local web server of your choice. Because the demo project was created with Create React App, you'll see a prompt telling you how to do this with Server, i.e. serve -s build. If you don't have Serve, you can install it globally via npm i serve -g.
There are is only one unit tests, which was installed by Create React App. All it does is test that the demo app loads, so probably not worth running.
End to end (E2E) tests are handled by Protractor with Selenium Web Driver.
Before running the E2E tests, you'll need to install the web driver first by running:
npm run updateWebDriver
Again, you need to be in that /examples folder before running this command. You should only have to do this once though, although beware that Selenium can be picky about which web browser versions that it will run against.
The same set of tests can be run against either the Dev version or the built version of the Demo. To run run tests against the Development version of the Demo, you need to run:
npm run e2eDev
This assumes that you already have the Demo running on port 3000 via an npm run start or yarn start in the project's /examples folder (see above).
To run run tests against the Production version of the Demo, you need to run:
npm run e2eProd
This assumes that you have already have built the demo (and source component), and have serve running on port 5000 (see above).
Test results will be displayed in whichever terminal you ran your test commands.
The tests will also generate HTML reports in the /examples/reports folder, courtesy of the protractor-jasmine2-screenshot-reporter package. Open the /examples/reports/index.html file in a browser to see them. (I use the Open in Browser extension for VSCode for this.)
When you open the reports, note how each test result is a URL. If you click on the URL, it will take you to a screen shot of how the browser looked when that particular test ran, which is pretty neat, IMHO!
The tests themselves are in the file /examples/tests/e2e/slidertest1.js. The tests check:
For more information on writing tests, checkout the Protractor Tutorial, and the Protractor API.
Protractor defaults to using the Firefox browser, but I've overridden the config so that it uses Chrome instead, so make sure that you have Chrome installed! If you want to use Firefox or even IE, then you'll need to make some modifications to the protractor.local.conf.js file. Google for how to do that.
Whatever other changes you make to protractor.local.conf.js, you must not remove this line:
browser.ignoreSynchronization = true;
Protractor is actually a testing tool designed for AngularJS and Angular, but hey, nobody's perfect! :wink: By default, Protractor will wait for Angular models to send their update messages before proceeding onto the next test. This line tells Protractor not to wait for any such messages, which, of course, won't be coming because you're not using Angular.
Version 2.2.3: 25 Jan 2020
Version 2.2.2: 25 Feb 2019
Version 2.2.0 and 2.2.1: 23 Feb 2019
Version 2.1.5: 2 May 2018
max value was set to zero.Version 2.1.4: 13 Apr 2018
Version 2.1.2 & 2.1.3: 21 Oct 2017
Version 2.1.1: 3 Oct 2017
Version 2.1.0: 30 Sep 2017
Version 2.0.1: 19 Aug 2017
Version 2.0.0: 30 Apr 2017
Version 1.1.7: 2 Apr 2017
Version 1.1.6: 28 Mar 2017
Version 1.1.5: 7 Mar 2017
Version 1.1.4: 11 Feb 2017
reverse parameter should actually be reversed. (Thanks to chunkiat82 for the pick up.)Version 1.1.3: 19 Nov 2016
Version 1.1.2: 24 Sep 2016
change to slideStop in v1.1.1. This was a dumb way of doing it, and was a borderline breaking change to boot.slideStop event, which maps to the bootstrap-slider event of the same namechange event, which maps to the bootstrap-slider event of the same name. Note: this is in addition to the previous handleChange event, which will continue to work and is not being deprecated here.Version 1.1.1: 23 Sep 2016 (NB: Bad version. Do not use! See 1.12 comments above.)
change to slideStop. Component should now be less chatty with improved performance.Version 1.1.0: 21 Sep 2016.
Version 1.0.6: 1 August 2016.
Version 1.0.5: 13 June 2016.
FAQs
Bootstrap Slider component for React
The npm package react-bootstrap-slider receives a total of 22,907 weekly downloads. As such, react-bootstrap-slider popularity was classified as popular.
We found that react-bootstrap-slider demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.