Skip to content

Commit 7df9d43

Browse files
pborissowpborissow
committed
Updated slider demo
1 parent 0c1d139 commit 7df9d43

File tree

2 files changed

+82
-96
lines changed

2 files changed

+82
-96
lines changed

‎demos/slider/Slider.css‎

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎demos/slider/Slider.html‎

Lines changed: 82 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<!--
5+
Replace the previous 2 lines with this to see if the behaviour changes in any way
16
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
2-
<head>
7+
-->
8+
39
<title>Slider Demo</title>
410

511
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -10,34 +16,94 @@
1016

1117

1218
<!-- JavaXT Includes -->
13-
<script type="text/javascript" src="../../src/slider/Slider.js"></script>
14-
<script type="text/javascript" src="../../src/utils/Utils.js"></script>
19+
<script src="../../src/slider/Slider.js"></script>
20+
<script src="../../src/utils/Utils.js"></script>
21+
22+
<style>
23+
24+
.pink-slider {
25+
position: relative;
26+
display: inline-block;
27+
28+
background-color: #fff;
29+
background-image: linear-gradient(#ec567c, #ec567c);
30+
background-repeat: no-repeat;
31+
32+
height: 4px;
33+
border: 1px solid #dcdcdc;
34+
transition: height 200ms cubic-bezier(0.52, 0.075, 0.47, 0.895);
35+
}
36+
37+
.pink-slider:hover {
38+
height: 8px;
39+
}
40+
41+
.white-dot {
42+
position: absolute;
43+
display: inline-block;
44+
width: 10px;
45+
height: 10px;
46+
border-radius: 50%;
47+
background-color: #fff;
48+
border: 1px solid #dcdcdc;
49+
transition: all 200ms cubic-bezier(0.52, 0.075, 0.47, 0.895);
50+
transition-property: width, height, margin;
51+
}
52+
53+
.white-dot:hover {
54+
width: 20px;
55+
height: 20px;
56+
margin-top: -4px;
57+
margin-left: -5px;
58+
}
59+
</style>
60+
61+
</head>
62+
63+
<body>
64+
<div class="demo-container">
1565

66+
<h1>Slider Demos</h1>
1667

17-
<link type="text/css" rel="stylesheet" href="Slider.css"/>
68+
<h2>Default Slider</h2>
69+
<p>Simple slider with no style rules defined. As the slider is moved, the value below is updated.</p>
70+
<div id="value"></div>
71+
<div id="slider" style="margin:20px 0px 20px 0;width:600px;"></div>
72+
73+
74+
<h2>Custom Slider</h2>
75+
<p>Simple slider with custom pink style. The height of the slider and handle are updated on mouseover.</p>
1876

19-
<script type="text/javascript">
77+
<div id="slider2" style="margin:20px 0px 20px 0;width:600px;"></div>
78+
</div>
79+
80+
81+
<script>
2082
window.onload = function() {
2183

2284
var value = document.getElementById("value");
2385

24-
var slider = new javaxt.dhtml.Slider(document.getElementById("slider"));
86+
var slider = new javaxt.dhtml.Slider(document.getElementById("slider"), {
87+
units: "percent"
88+
});
2589
slider.onChange = function(val){
26-
var percentage = Math.round(slider.getValue(true)*100) + "%";
27-
value.innerHTML = val + "/" + slider.getWidth() + " " + percentage;
90+
var percentage = Math.round(val) + "%";
91+
value.innerHTML = Math.round(slider.getPosition()) + "/" + slider.getWidth() + " " + percentage;
2892
};
93+
slider.setValue("50%");
94+
2995

3096

31-
slider.setValue(100);
97+
new javaxt.dhtml.Slider(document.getElementById("slider2"), {
98+
units: "percent",
99+
value: "30%",
100+
style: {
101+
groove: "pink-slider",
102+
handle: "white-dot"
103+
}
104+
});
32105

33106
};
34107
</script>
35-
</head>
36-
37-
<body>
38-
39-
<div id="value"></div>
40-
<div id="slider" style="margin:20px 0px 20px 20px;width:600px;"></div>
41-
42108
</body>
43109
</html>

0 commit comments

Comments
 (0)