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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Jquery UI-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></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.

<select>
  <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>
</select>

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

$("select").horizontalSelector();

Changelog:

2019-11-23

• CSS updated: remove branding and fix margins

2019-09-20

• JS Updated

---

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