jq-button-range-slider
Version:
jQuery range slider plugin with buttons.
174 lines (152 loc) • 4 kB
HTML
<html>
<head>
<title>jqButtonRangeSlider</title>
<link type="text/css" rel="stylesheet" href="../dist/jq-button-range-slider.css" />
<style type="text/css">
body{
padding: 30px;
}
</style>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../dist/jq-button-range-slider.js"></script>
</head>
<body>
<div class="container">
<h1>Jquery Button Range Slider Demo</h1>
<h2>Example #1:</h2>
<div id="demo-1"></div>
<div id="demo-1-result">
<h3>Result:</h3>
<p>Selected range: <span class="rg"></span></p>
<p>Value at Lower Bound : <span class="lb"></span></p>
<p>Value at Upper Bound: <span class="ub"></span></p>
</div>
<h2>Example #2:</h2>
<div id="demo-2"></div>
<div id="demo-2-result">
<h3>Result:</h3>
<p>Selected range: <span class="rg"></span></p>
<p>Value at Lower Bound : <span class="lb"></span></p>
<p>Value at Upper Bound: <span class="ub"></span></p>
</div>
<h2>Example #3: Set range</h2>
<div id="demo-3"></div>
<p style="margin:20px 0;"><a href="#" id="demo-3-reset">Click here</a> to reset slider !</p>
<p style="margin:20px 0;"><a href="#" id="demo-3-destory">Click here</a> to destroy slider !</p>
<p style="margin:20px 0;"><a href="#" id="demo-3-range">Click here</a> to set range from `Carbon` to `Oxygen` !</p>
<div id="demo-3-result">
<h3>Result:</h3>
<p>Selected range: <span class="rg"></span></p>
<p>Value at Lower Bound : <span class="lb"></span></p>
<p>Value at Upper Bound: <span class="ub"></span></p>
</div>
</div>
<script>
$( function() {
$( "#demo-1" ).jqButtonRangeSlider({
sliderOptions: [{
name: "Calcium",
value: 20
},{
name: "Carbon",
value: 6
},{
name: "Gold",
value: 79
},{
name: "Hydrogen",
value: 1
},{
name: "Mercury",
value: 80
},{
name: " Oxygen",
value: 8
},{
name: "Zinc",
value: 30
},{
name: "Titanium",
value: 22
}]
}).on('afterChange', function(e, values, ui, slider) {
$('#demo-1-result .rg').text(values);
$('#demo-1-result .lb').text(ui.lb.value);
$('#demo-1-result .ub').text(ui.ub.value);
});
$( "#demo-2" ).jqButtonRangeSlider({
sliderOptions: [{
name: "WHITE",
value: "#FFFFFF"
},{
name: "BLACK",
value: "#000000"
},{
name: "RED",
value: "#FF0000"
},{
name: "YELLOW",
value: "#FFFF00"
},{
name: "GREEN",
value: "#008000"
},{
name: "BLUE",
value: "#0000FF"
}]
}).on('afterChange', function(e, values, ui, slider) {
$('#demo-2-result .rg').text(values);
$('#demo-2-result .lb').text(ui.lb.value);
$('#demo-2-result .ub').text(ui.ub.value);
});
$( "#demo-3" ).jqButtonRangeSlider({
sliderOptions: [{
name: "Calcium",
value: 20
},{
name: "Carbon",
value: 6
},{
name: "Gold",
value: 79
},{
name: "Hydrogen",
value: 1
},{
name: "Mercury",
value: 80
},{
name: " Oxygen",
value: 8
},{
name: "Zinc",
value: 30
},{
name: "Titanium",
value: 22
}]
}).on('afterChange', function(e, values, ui, slider) {
$('#demo-3-result .rg').text(values);
$('#demo-3-result .lb').text(ui.lb.value);
$('#demo-3-result .ub').text(ui.ub.value);
})
$('#demo-3-reset').click(function(e){
e.preventDefault();
$( "#demo-3" ).jqButtonRangeSlider( "reset");
});
$('#demo-3-range').click(function(e){
e.preventDefault();
$( "#demo-3" ).jqButtonRangeSlider( "setRange", {
lb: 6,
ub: 8,
});
});
$('#demo-3-destory').click(function(e){
e.preventDefault();
$( "#demo-3" ).jqButtonRangeSlider( "destroy");
});
} );
</script>
</body>
</html>