kendo-theme-bootstrap/demo/slider.html

70 строки
1.2 KiB
HTML
Исходник Обычный вид История

2016-04-14 18:42:07 +03:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Slider</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../dist/all.css" />
2016-04-14 18:42:07 +03:00
2016-07-14 15:35:07 +03:00
<script src="http://localhost/kendo/dist/js/jquery.min.js"></script>
<script src="http://localhost/kendo/dist/js/kendo.all.min.js"></script>
2016-06-06 09:50:54 +03:00
<style>
.slider-h {
width: 500px;
}
.slider-h .k-slider {
width: 100%;
}
.slider-v {
margin-top: 20px;
height: 240px;
}
.slider-v .k-slider {
height: 100%;
}
</style>
2016-04-14 18:42:07 +03:00
</head>
<body>
<div class="container">
<legend>Slider</legend>
2016-06-06 09:50:54 +03:00
<div class="slider-h">
2016-04-14 18:42:07 +03:00
<input id="slider" value="0" />
</div>
2016-06-06 09:50:54 +03:00
<div class="slider-v">
<input id="slider-v" value="0" />
</div>
2016-04-14 18:42:07 +03:00
</div>
<script>
$(document).ready(function() {
var slider = $("#slider").kendoSlider({
2016-06-06 09:50:54 +03:00
min: 0,
max: 10,
smallStep: 1,
largeStep: 2
}).data("kendoSlider");
var sliderv = $("#slider-v").kendoSlider({
orientation: "vertical",
min: 0,
2016-04-14 18:42:07 +03:00
max: 10,
2016-06-06 09:50:54 +03:00
smallStep: 1,
largeStep: 2
2016-04-14 18:42:07 +03:00
}).data("kendoSlider");
slider.wrapper.find( ".k-icon" ).html( "" );
2016-06-06 09:50:54 +03:00
sliderv.wrapper.find( ".k-icon" ).html( "" );
2016-04-14 18:42:07 +03:00
});
</script>
</body>
</html>