Create A Horizontal Selector with jQuery and Bootstrap

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

Horizontal Selector is a jQuery plugin that automatically generates 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.




  • CSS updated: remove branding and fix margins


  • JS Updated

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