-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
133 lines (104 loc) · 6.78 KB
/
index.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Stolen from https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_photo2&stacked=h -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Dependencies -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Range slider code -->
<script src="d3RangeSlider.js"></script>
<!-- Range slider style -->
<link href="d3RangeSlider.css" rel="stylesheet">
<title>D3 range slider</title>
<style type="text/css">
#container{
height: 30px;
}
body, h1, h2 {
font-family: "Raleway", Arial, sans-serif;
}
h1, h2 {
text-align: center;
margin:0.8em;
}
h1 {
letter-spacing: 6px;
margin-bottom:1.5em;
font-weight: 900;
}
h2 {
margin-bottom:1em;
}
#range-label {
text-align: center;
}
.section{
margin-bottom:5em;
font-size: 1.5em;
}
.footer{
background-color: #F8F8FA;
padding: 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>D3 range slider</h1>
<!-- Slider example -->
<div class="section">
<h2>Drag the bar to select a range</h2>
<div id="container"></div>
<div id="range-label"></div>
<script type="text/javascript">
var slider = createD3RangeSlider(0, 100, "#container", true);
slider.onChange(function(newRange){
d3.select("#range-label").html(newRange.begin + " — " + newRange.end);
});
slider.range(0,10);
</script>
</div>
<!-- Slider code -->
<div class="section">
<h2>Embed the range slider</h2>
<pre style='color:#000020;background:#f6f8ff;'><span style='color:#308080; '><</span><span style='color:#003060; '>div</span> id<span style='color:#308080; '>=</span><span style='color:#800000; '>"</span><span style='color:#1060b6; '>slider-container</span><span style='color:#800000; '>"</span><span style='color:#308080; '>></span><span style='color:#308080; '><</span><span style='color:#308080; '>/</span><span style='color:#003060; '>div</span><span style='color:#308080; '>></span>
<span style='color:#308080; '><</span><span style='color:#003060; '>div</span> id<span style='color:#308080; '>=</span><span style='color:#800000; '>"</span><span style='color:#1060b6; '>range-label</span><span style='color:#800000; '>"</span><span style='color:#308080; '>></span><span style='color:#008c00; '>0</span> <span style='color:#308080; '>-</span> <span style='color:#008c00; '>10</span><span style='color:#308080; '><</span><span style='color:#308080; '>/</span><span style='color:#003060; '>div</span><span style='color:#308080; '>></span>
<span style='color:#308080; '><</span>script type<span style='color:#308080; '>=</span><span style='color:#800000; '>"</span><span style='color:#1060b6; '>text/javascript</span><span style='color:#800000; '>"</span><span style='color:#308080; '>></span>
var slider <span style='color:#308080; '>=</span> createD3RangeSlider<span style='color:#308080; '>(</span><span style='color:#008c00; '>0</span><span style='color:#308080; '>,</span> <span style='color:#008c00; '>100</span><span style='color:#308080; '>,</span> <span style='color:#800000; '>"</span><span style='color:#1060b6; '>#slider-container</span><span style='color:#800000; '>"</span><span style='color:#308080; '>)</span><span style='color:#406080; '>;</span>
slider<span style='color:#308080; '>.</span>onChange<span style='color:#308080; '>(</span>function<span style='color:#308080; '>(</span>newRange<span style='color:#308080; '>)</span>{
d3<span style='color:#308080; '>.</span><span style='color:#400000; '>select</span><span style='color:#308080; '>(</span><span style='color:#800000; '>"</span><span style='color:#1060b6; '>#range-label</span><span style='color:#800000; '>"</span><span style='color:#308080; '>)</span><span style='color:#308080; '>.</span>text<span style='color:#308080; '>(</span>newRange<span style='color:#308080; '>.</span>begin <span style='color:#308080; '>+</span> <span style='color:#800000; '>"</span><span style='color:#1060b6; '> - </span><span style='color:#800000; '>"</span> <span style='color:#308080; '>+</span> newRange<span style='color:#308080; '>.</span>end<span style='color:#308080; '>)</span><span style='color:#406080; '>;</span>
}<span style='color:#308080; '>)</span><span style='color:#406080; '>;</span>
slider<span style='color:#308080; '>.</span>range<span style='color:#308080; '>(</span><span style='color:#008c00; '>0</span><span style='color:#308080; '>,</span><span style='color:#008c00; '>10</span><span style='color:#308080; '>)</span><span style='color:#406080; '>;</span>
<span style='color:#308080; '><</span><span style='color:#308080; '>/</span>script<span style='color:#308080; '>></span>
</pre>
</div>
<div class="section">
<h2>Fetch the code</h2>
<div style="text-align: center;">
<a href="https://github.com/RasmusFonseca/d3RangeSlider">github.com/RasmusFonseca/d3RangeSlider</a>
</div>
</div>
<div class="section">
<h2>Technical details</h2>
<ul>
<li>Depends on <a href="https://d3js.org/">D3 (v4 - v5)</a></li>
<li>Must be styled through CSS. Use <a href="d3RangeSlider.css">d3RangeSlider.css</a> as a template</li>
<li>Container must have <code>position: relative</code> in the style</li>
<li>Range can be modified from JS using for example <code>slider.range(10,20)</code></li>
</ul>
</div>
</div><!-- /.container -->
<div class="footer">
<div class="container">
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<div class="LI-profile-badge" data-version="v1" data-size="large" data-locale="en_US" data-type="horizontal" data-theme="light" data-vanity="rasmusfonseca"><a class="LI-simple-link" href='https://www.linkedin.com/in/rasmusfonseca?trk=profile-badge'>Rasmus Fonseca</a></div>
</div>
</div>
</body>
</html>