
r-slider is a multi-purpose, highly customizable slider control plugin that helps users select a single value or a range of values in an elegant way.
Also can be used to create toggle switch, progress bar, step based form wizard with your own styles. Check out the examples in the zip for more information.
1. To get started, import jQuery library and the r-slider plugin into the document.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="js/r-slider.js"></script>
2. Create a new slider control on the webpage.
<div id="container"></div>
var mySlider = new slider({ // container element container: "#container", // start/end values start: -100, end: 100, // custom step step: 1, // initial value value: 0 });
3. Apply your own CSS styles to the slider control.
#container .r-slider-line { background: #4b5459; border-radius: 4px; } #container .r-slider-fill { background: #4b5459; } #container .r-slider-button { box-shadow: inset 0 0 0 4px #c4c8cc; border-radius: 100%; text-align: center; } #container .r-slider-label { position: relative; top: 13px; font-size: 20px; color: #c4c8cc; z-index: 1000; } #container .r-slider-label:before { content: ""; position: absolute; top: -13px; left: 5px; width: 30px; height: 30px; background: #4b5459; border-radius: 100%; z-index: -1; }
4. Advanced usages.
var mySlider = new slider({ // container element container: "#container", // start/end values start: -100, end: 100, // min/max values min: -50, max: 80, // custom step step: 1, // initial value value: 0, // shows value on drag showValue: true, // always shows value fixValue: true, // shows labels pinStep: 10, // custom label step labelStep: 40, // disables drag changable: false, // custom styles style: { line_width: 0 }, // for toggle switch text: ["ON", "OFF"], // callback ondrag: function(){} });
This awesome jQuery plugin is developed by mohammadFeiz. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 07.10.2018
- Source