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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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" 
       type="number" 
       min="500000" 
       max="1000000" 
       step="1000" 
       data-bubble-font-scale="0.5" 
       data-thumb-scale="0.5" 
       data-thumb-color="#6324B5" 
       data-track-scale="0.5"
>

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

$("#example").bubbleSlider();

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".

$("#example").bubbleSlider({
  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();
instance.setValue(750000);
instance.positionThumb(750000);

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