-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathexample.html
100 lines (81 loc) · 3.66 KB
/
example.html
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Bootstrap Slider Knockout Binding Example</title>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js'></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type='text/javascript' src="lib/bootstrap-slider.min.js"></script>
<script type='text/javascript' src="bootstrap-slider-knockout-binding.js"></script>
<link rel="stylesheet" href="lib/bootstrap-slider.min.css"/>
<style type="text/css">
body {
padding-top: 50px;
}
.starter-section {
padding: 40px 15px;
text-align: center;
}
.slider {
margin-top: 30px;
}
.slider-track-high {
background: red;
}
.slider-track-low {
background: green;
}
.slider-selection {
background: yellow;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
function viewModel() {
this.selectedValue = ko.observable(5);
this.selectedValue2 = ko.observable(6);
this.highRiskValue = ko.observable(80);
this.lowRiskValue = ko.observable(20);
};
ko.applyBindings(new viewModel());
});
</script>
</head>
<body>
<div class="container">
<div class="starter-section">
<h1>Bootstrap Slider Knockout Binding Example</h1>
<p class="lead">This is an example for using a Knockout binding on the Bootstrap Slider: <a
href="https://github.com/seiyria/bootstrap-slider">https://github.com/seiyria/bootstrap-slider</a>.</p>
</div>
<p>The Knockout binding allows you to use an observable as a value for the slider and to customize the options
of the slider via knockout params.</p>
<h1>Simple example with default options</h1>
<p>
<code><input type="text" class="slider form-control" data-bind="sliderValue: selectedValue"/></code><br/>
<input type="text" class="slider form-control" data-bind="sliderValue: selectedValue"/>
</p>
<p>Selected value: <b data-bind="text: selectedValue"></b></p>
<h1>Example with options</h1>
<p>
<code><input type="text" class="slider form-control"
data-bind="sliderValue: {value: selectedValue, min:0, max: 22, step: 2, tooltip: 'always'}"/></code><br/>
<input type="text" class="slider form-control"
data-bind="sliderValue: {value: selectedValue2, min:0, max: 22, step: 2, tooltip: 'always'}"/>
</p>
<p>Selected value: <b data-bind="text: selectedValue2"></b></p>
<h1>Example with dual sliders</h1>
<p><code><input type="text" class="slider form-control"
data-bind="sliderValue: {value: [lowRiskValue, highRiskValue], min:0, max: 100, step: 1, tooltip: 'always'}"/></code><br/>
0<input type="text" class="slider form-control" data-bind="sliderValue: {value: [lowRiskValue, highRiskValue], min:0, max: 100, step: 1, tooltip: 'always'}"/>100
<p>Selected low value: <b data-bind="text: lowRiskValue"></b></p>
<p>Selected low value: <b data-bind="text: highRiskValue"></b></p>
</p>
</div>
<!-- /.container -->
</body>
</html>