Responsive Touch-enabled Range Slider For jQuery - Bubble Slider

Responsive Touch-enabled Range Slider For jQuery - Bubble Slider

Bubble Slider is a jQuery plugin which converts a regular number input into a responsive, touch-enabled range slider control with custom thumb/track and increment/decrement buttons. The range slider control falls back to a normal number input field when the JavaScript is disabled.

1. Import the jQuery Bubble Slider plugin's JavaScript and CSS files into the document which has the latest jQuery library loaded.

<link href="dist/bubble-slider.css" rel="stylesheet">
<script src="" 
<script src="dist/jquery.bubble-slider.js"></script>

2. Create a standard number input in the document and config the range slider with the native input attributes and HTML data-OPTION attributes (See the options section).

<input id="example" 
       placeholder="500,000 - 1,000,000" 

3. Call the function on the number input to generate a range slider.


4. All possible options to config & customize the range slider. Note that the options as display blow can be passed via data-OPTION attributes as in data-bubble-font-scale="0.5".

  min: 0,
  max: 100,
  step: 1,
  value: 50,
  decimals: 0,
  prefix: "",
  postfix: "",
  toggleBubble: false,
  toggleLimit: 3,
  bubbleColor: "",
  bubbleFontScale: 1,
  bubbleFontColor: "",
  thumbScale: 1,
  thumbColor: "",
  thumbFontScale: 1,
  thumbFontColor: "",
  trackScale: 1,
  trackColor: ""

5. To congif the range slider globally, follow this step:

$.fn.bubbleSlider.defaults = {
  trackColor: '#E7E7E7',
  // more options here

6. To set the value of the range slider, follow this step:

var instance = $("#example").bubbleSlider();

This awesome jQuery plugin is developed by dahjson. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 18.02.2018
  • Source