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
| <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Vertical slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "max",
min: 0,
max: 90,
step: 30,
value: 0,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
</script>
<style>
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 25px;
height: 25px;
cursor: pointer;
background: url('Images/SVG/puceSlider.svg') no-repeat 50% 50%;
font-weight: bold;
color: #1C94C4;
outline: none;
top: -7px;
margin-left: 0px;
}
</style>
</head>
<body>
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-vertical" style="height:200px; width:10px; margin-left:100px; "></div>
</body>
</html> |
Partager