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
|
<?php
$title = "noUiSlider - Number formatting";
$description = "Number formatting in slider options, tooltips, ranges and pips.";
$canonical = "nouislider/number-formatting/"
?>
<h1>Number formatting</h1>
<section>
<div class="view">
<p>To format the slider output, noUiSlider offers a <code>format</code> option.</p>
<p>Specify <code>to</code> and <code>from</code> functions to encode and decode the values.</p>
<p>By default, noUiSlider will format output with <strong>2 decimals</strong>.</p>
<p>The to/from paradigm is supported in the <a href="https://refreshless.com/wnumb/">the wNumb formatting library</a>. wNumb offers a
wide range of options and provides number validation. wNumb is completely optional, and not included in
noUiSlider by default.</p>
<p>Note that if the <code>.to()</code> method returns a <code>Number</code>, noUiSlider's <code>.get()</code>
will also return <code>Number</code>s. See <a href="https://github.com/leongersen/noUiSlider/issues/813">this
issue </a> for more details.
<div class="example">
<div id="slider-format"></div>
<input title="Formatted number" id="input-format">
<?php run('wnumb'); ?>
<?php run('format-events'); ?>
</div>
</div>
<div class="side">
<?php code('format'); ?>
<div class="viewer-header">Formatting with wNumb</div>
<div class="viewer-content">
<?php code('wnumb'); ?>
</div>
<div class="viewer-header">Connecting the input field</div>
<div class="viewer-content">
<?php code('format-events'); ?>
</div>
</div>
</section>
<?php sect('tooltips'); ?>
<h2>Tooltips</h2>
<section>
<div class="view">
<p>The <a href="../slider-options/#section-tooltips"><code>tooltips</code></a> option can accept the
same to/from formatter.</p>
<p>By default, the tooltips use the same formatting as the slider output, but this can be overridden.</p>
<div class="example overflow">
<div id="slider-tooltips"></div>
<?php run('tooltips'); ?>
</div>
</div>
<div class="side">
<?php code('tooltips'); ?>
</div>
</section>
<?php sect('pips'); ?>
<h2>Pips</h2>
<section>
<div class="view">
<p>The <a href="../pips/"><code>pips</code></a> option can accept the
same to/from formatter.</p>
<p>By default, the pips use the same formatting as the slider output, but this can be overridden.</p>
<div class="example overflow">
<div id="slider-pips"></div>
<?php run('pips'); ?>
</div>
</div>
<div class="side">
<?php code('pips'); ?>
</div>
</section>
<?php sect('aria'); ?>
<h2>Aria</h2>
<section>
<div class="view">
<p>Formatting can be used for the <code>aria-valuenow</code> accessibility attribute using the
<code>ariaFormat</code> option.</p>
</div>
<div class="side">
<?php code('aria'); ?>
</div>
</section>
|
