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
|
<?php sect('pips'); ?>
<h1>Interacting with pips</h1>
<section>
<div class="view">
<p>When using the <a href="../pips/">pips feature</a>, several interactions can be added. Pips can also be styled.</p>
<p>This example shows pips being displayed vertically, and highlighted when the slider handle is at that value.</p>
<p>Have a look at the <a href="../examples/#section-click-pips">example on moving the slider by clicking pips</a>.</p>
<div class="example" style="padding-bottom: 80px">
<div id="slider-pips"></div>
<?php run('pips'); ?>
<?php run('pips-events'); ?>
</div>
</div>
<div class="side">
<div class="viewer-header">Slider with pips</div>
<div class="viewer-content">
<?php code('pips'); ?>
</div>
<?php code('pips-events'); ?>
<div class="viewer-header">Vertical Pips</div>
<div class="viewer-content">
<?php loadShowCSS('pips'); ?>
</div>
</div>
</section>
|
