The bootstrap slider is a good option to add slider elements to your website. JQuery is optional and the plugin can operate with or without jQuery.
I have used it in a couple of my freelance projects.
Github: https://github.com/seiyria/bootstrap-slider
Demos: https://seiyria.com/bootstrap-slider/
Screenshots:
Examples:
Example 1 Basic example with custom formatter and colored selected region via CSS
Example 2 Range selector, options specified via data attribute
Example 3 Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles
Example 4 Vertical Slider with reversed values (largest to smallest)
Example 5 Destroy instance of slider by calling destroy() method on slider instance via JavaScript
Example 6 Able to bind to ‘slide’ JQuery event on slider, which is triggered whenever the slider is used
Example 7 Sliders can be enabled and disabled
Example 8 Tooltip can always be displayed
Example 9 Precision (number of places after the decimal) can be specified
Example 10 Setting custom handlers
Example 11 Using a custom step interval
Example 12 Coloring the low and high track segments
Example 13 Using tick marks and labels
Example 14 Using tick marks at specific positions
Example 15 With a logarithmic scale
Example 16 Focus the slider handle after a value changes
Example 17 Unusual tooltip positions
Example 18 Accessibility with ARIA labels
Example 19 Auto-Register data-provide=”slider” Elements
Example 20 Slider-Elements initially hidden
Example 21 Create an input element with the data-provide=”slider” attribute automatically turns it into a slider. Options can be supplied via data-slider- attributes
Example 22 Highlight ranges on slider with rangeHighlights attribute
Example 23 Using tick marks at specific positions
Example 24 rtl mode (auto)
Example 25 Lock selection to ticks
Example 26 Refresh method with optional options object
You must be logged in to post a comment.