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
|
<?php sect('styling'); ?>
<h1>Styling</h1>
<section>
<div class="view">
<p>noUiSlider, by default, comes with a design with large handles and box shadows. In general, larger handles make range sliders easier to use on mobile devices and touch screens.</p>
<p>It is recommended to use the default stylesheet, overriding where necessary, as a starting point when re-styling noUiSlider.</p>
<p>When the slider handles are restyled to be smaller, <code>.noUi-touch-area</code> should be styled to be larger, to be easier to click or touch. The sliders in this example show the larger touch area when hovered.</p>
<p><code>padding</code> can be added to <code>.noUi-target</code> to contain handles within the slider's width.</p>
<p>See <a href="<?php echo $relpath; ?>more/#section-styling">the documentation on styling</a> for further tips and an overview of classes.</p>
<div class="example">
<strong class="style-head">Default styling</strong>
<div style="margin-bottom: 30px;" id="slider"></div>
<strong class="style-head">Fit handles within slider</strong>
<div style="margin-bottom: 30px;" id="slider-fit"></div>
<strong class="style-head">Don't overlap handles</strong>
<div style="margin-bottom: 30px;" id="slider-no-overlap"></div>
<strong class="style-head">Rounded styling</strong>
<div style="margin-bottom: 30px;" class="slider-styled" id="slider-round"></div>
<strong class="style-head">Square styling</strong>
<div class="slider-styled" id="slider-square"></div>
<?php run('styling'); ?>
</div>
</div>
<div class="side">
<pre><code>
<div id="slider"></div>
<div id="slider-fit"></div>
<div id="slider-no-overlap"></div>
<div class="slider-styled" id="slider-round"></div>
<div class="slider-styled" id="slider-square"></div>
</code></pre>
<div class="viewer-header">Don't overlap handles</div>
<div class="viewer-content">
<?php loadShowCSS('styling-no-overlap'); ?>
</div>
<div class="viewer-header">Fit handles withing the slider</div>
<div class="viewer-content">
<?php loadShowCSS('styling-fit'); ?>
</div>
<div class="viewer-header">Style resets</div>
<div class="viewer-content">
<?php loadShowCSS('styling'); ?>
</div>
<div class="viewer-header">Styling the touch area</div>
<div class="viewer-content">
<?php loadShowCSS('styling-touch-area'); ?>
</div>
<div class="viewer-header">Styling round slider</div>
<div class="viewer-content">
<?php loadShowCSS('styling-round'); ?>
</div>
<div class="viewer-header">Styling square slider</div>
<div class="viewer-content">
<?php loadShowCSS('styling-square'); ?>
</div>
</div>
</section>
|
