1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
| <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#main { max-width: 50em; margin: auto;}
p { line-height: 2em; width: 20em;}
p span { float: right; display: inline-block; width: 10em;}
p span:before { content: ":"; margin-right: 1em;}
</style>
<script>
function getTheColor(colorVal) {
var theColor = '';
if (colorVal < 50) {
myRed = 255;
myGreen = parseInt(((colorVal * 2) * 255) / 100);
}
else {
myRed = parseInt(((100 - colorVal) * 2) * 255 / 100);
myGreen = 255;
}
theColor = 'rgb(' + myRed + ',' + myGreen + ',0)';
return (theColor);
}
var $_Slider;
function colorSlide(color) {
$('#coloredSlider .ui-slider-range').css('background-color', color);
$('#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default').css('background-color', color);
}
function handlerSlide(e) {
var color = $_Slider.slider('value'),
color = getTheColor(color);
$('#slide-value span').html(color);
colorSlide(color);
}
function handlerChange(e) {
var color = $_Slider.slider('value'),
color = getTheColor(color);
$('#change-value span').html(color);
$('#change-value').css('background-color', color);
colorSlide('');
}
$(function () {
$_Slider = $('#coloredSlider');
$_Slider.slider({
orientation: 'horizontal',
range: 'min',
max: 100,
value: 0,
slide: handlerSlide,
change: handlerChange
});
});
</script>
</head>
<body>
<div id="main" class="ui-widget">
<h1>A Colored jQuery UI Slider</h1>
<div id="coloredSlider"></div>
<p id="slide-value">Slide value<span></span></p>
<p id="change-value">Change value<span></span></p>
</div>
</body>
</html> |
Partager