Create A Horizontal Selector with jQuery and Bootstrap

Create A Horizontal Selector with jQuery and Bootstrap
File Size: 204 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Horizontal Selector is a jQuery plugin that automatically generate a range slider-style horizontal selector UI for default select box using jQuery, jQuery UI and Bootstrap 3.

How to use it:

1. Include jQuery, jQuery UI and Bootstrap 3 framework in the document.

<!-- Jquery -->
<script src=""></script>

<!-- Jquery UI-->
<link rel="stylesheet" href="" />
<script src=""></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="">
<script src=""></script>

2. Load the jQuery Horizontal Selector plugin after jQuery library.

<link href="css/horizontal_selector.css" rel="stylesheet">
<script src="js/horizontal_selector.js"></script>

3. Create a standard select box.

  <option value="0">C</option>
  <option value="1">C++</option>
  <option value="2" >C#</option>
  <option value="3">Object-C</option>
  <option value="4">Java</option>
  <option value="5" selected>Ruby</option>
  <option value="6">Python</option>
  <option value="7">Perl</option>

4. Call the function on the select box and we're done.


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