Colored jQuery & jQuery Mobile Value Slider Plugin - Colored Slider

File Size: 3.92 KB
Views Total: 3004
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Colored jQuery & jQuery Mobile Value Slider Plugin - Colored Slider

Colored Slider is a jQuery & jQuery mobile plugin that converts a range input to a value slider with color feedback when the value changed.

How to use it:

1. Include the latest jQuery javascript library and jQuery mobile's CSS and javascript on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

2. Include the jQuery colored slider's javascript after jQuery lirbary.

<script src="colored.slider.js"></script>

3. Create the html for a value slider widget on the page.

<div data-role="page" id="Page1" data-theme="a" >
<div role="main" class="ui-content">
<label for="slider"></label>
<input type="range" name="sliders" id="slider0"  value="93" min="0" max="100" data-highlight="true">
</div>
</div>

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