Highly Customizable Range Slider Plugin For Bootstrap – Bootstrap Slider

How to use it:

1.Download and include the jQuery Bootstrap Slider plugin’s CSS and JS files on your web project which has jQuery library and Bootstrap framework installed.

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

2. Create a basic single value slider from a regular range input.

$("#input").slider();

3. Configuration options. The following options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-slider-*, as in data-slider-min=”0″.

$("#input").slider({

  // the id of the slider element
  id: "",

  // minimum value
  min: 0,

  // maximum value
  max: 10,

  // increment step
  step: 1,

  // the number of digits shown after the decimal.
  precision: 0,

  // 'horizontal' or 'vertical'
  orientation: 'horizontal',

  // initial value
  value: 5,

  // enable range slider
  range: false,

  // selection placement. 
  // 'before', 'after' or 'none'. 
  // in case of a range slider, the selection will be placed between the handles
  selection: 'before',

  // 'show', 'hide', or 'always'
  tooltip: 'show',

  // show two tooltips one for each handler
  tooltip_split: false,

  // 'round', 'square', 'triangle' or 'custom'
  handle: 'round',

  // whether or not the slider should be reversed
  reversed: false,

  // whether or not the slider is initially enabled
  enabled: true,

  // callback
  formatter: function formatter(val) {
    if (Array.isArray(val)) {
      return val[0] + " : " + val[1];
    } else {
      return val;
    }
  },

  // The natural order is used for the arrow keys. 
  // Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. 
  // By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value.
  natural_arrow_keys: false,

  // Used to define the values of ticks. 
  // Tick marks are indicators to denote special values in the range. 
  // This option overwrites min and max options.
  ticks: [],

  // Defines the positions of the tick values in percentages. 
  // The first value should always be 0, the last value should always be 100 percent.
  ticks_positions: [],

  // Defines the labels below the tick marks. Accepts HTML input.
  ticks_labels: [],

  // Used to define the snap bounds of a tick. 
  // Snaps to the tick if value is within these bounds.
  ticks_snap_bounds: 0,

  // Set to 'logarithmic' to use a logarithmic scale.
  scale: 'linear',

  // Focus the appropriate slider handle after a value change.
  focus: false,

  // ARIA labels for the slider handle's, Use array for multiple values in a range slider.
  labelledby: null
  
});

4.API methods.

// enable the slider
$("#input").slider("enable");

// disable the slider
$("#input").slider("disable");

// toggle the slider
$("#input").slider("toggle");

// refresh the slider
$("#input").slider("refresh");

// Renders the tooltip again, after initialization. 
// Useful in situations when the slider and tooltip are initially hidden.
$("#input").slider("relayout");

// destroy the slider
$("#input").slider("destroy");

// get the current value from the slider
$("#input").slider("getValue");

// get the div slider element
$("#input").slider("getElement");

// Returns true if enabled, false if disabled
$("#input").slider("isEnabled");

// Set a new value for the slider. 
// If optional triggerSlideEvent parameter is true, 'slide' events will be triggered. 
// If optional triggerChangeEvent parameter is true, 'change' events will be triggered. 
// This function takes newValue as either a Number or Array.
setValue(newValue, triggerSlideEvent, triggerChangeEvent)

// When the slider event eventType is triggered, the callback function will be invoked
$("#input").slider().on(eventType, callback);

// Remove the callback function from the slider event eventType
$("#input").slider().off(eventType, callback);

 

5.Events.

var demo = $('#inpit').slider()

// This event fires when the slider is dragged 
.on(slide, callback);

// This event fires when dragging starts
.on(slideStart, callback);

// This event fires when the dragging stops or has been clicked on
.on(slideStop, callback);

// This event fires when the slider value has changed
.on(change, callback);

// This event fires when the slider is enabled
.on(slideEnabled, callback);

// This event fires when the slider is disabled
.on(slideDisabled, callback);

 

Demo     Download

Highly Customizable Range Slider Plugin For Bootstrap – Bootstrap Slider

| CSS3, HTML5, Javascript, Twitter Bootstrap Framework | 0 Comments
About The Author
- Thank you for visiting my profile page. I have over 8+ years experience in web development. Product quality, Client service, and results are my priority. I offer unparalleled expertise and services in web design and front-end development, including responsive websites (Using Twitter bootstrap framework) and Hybrid Mobile Application (Using IONIC Framework) . I am proficient in a wide spectrum of technologies and learn new ones fast. I am seeking new opportunities to design, build and extend websites and web applications.