2 Demos of jQuery histogram slider

The histogram slider based on jQuery

The jquery-histogram-slider is a tiny and easy to use plug-in for creating the histogram slider on your website. The histogram is responsive and the slider is touch enabled as well.

The size of the plug-in is 8Kb that you need to include after the reference of jQuery library.

Demo1 Demo2
Developer’s page Download plug-in

How to use the histogram plug-in?

First of all, download the plug-in from above link. Unzip the compressed file and get the histogram.slider.js file and place it in your project directory. Refer the file in the <head> section, after the jQuery library.

You also need including the jquery-ui.js library for using this plug-in.

See the following section for the demos and code.

A demo of histogram plug-in

Click the image or link below to open the live demo. You may specify the data for the histogram by the data option of the plug-in.

Use the sliderRange option for setting the range of the slider.

The demo uses a few other available options including:

  • optimalRange
  • selectedRange
  • numberOfBins
  • showTooltips
  • showValues

jQuery histogram

See online demo and code

The markup uses just a div element with an ID that is referred in the jQuery and CSS:

 

The script:

 

See the complete code on the demo page.

Another example of histogram

See this demo where a few more options in addition to above are used:

  • showTooltips
  • colorSelected
  • colorOptimal
  • colorOptimalSelected

jQuery histogram 2

See online demo and code

The jQuery code with options:

 

The dataFactory is the function where you may set your own data to be used for the histogram. See the output and get the complete code from the demo page.