This time I will share jQuery Plugin and tutorial about Circular Slider Plugin With jQuery and D3.js – Wheel, hope it will help you in programming stack.
| File Size: | 8.17 KB |
|---|---|
| Views Total: | 6775 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Wheel is a simple fast jQuery plugin which takes advantage of D3.js library to draw a circular 360° slider from plain html structure.
How to use it:
1. Load the needed jQuery and D3.js JavaScript libraries into the html page.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/d3.min.js"></script> |
2. Create the html structure for the circular slider.
1 |
<div class="wheel"> |
2 |
<div class="wheel-progress"></div> |
3 |
<div class="wheel-center"> |
4 |
<span class="wheel-value"></span> |
5 |
</div> |
6 |
<a href="javascript:void(0)" class="wheel-handle"></a> |
7 |
</div> |
3. Apply the CSS styles as displayed below to the slider.
01 |
.wheel { |
02 |
width: 200px; |
03 |
height: 200px; |
04 |
border-radius: 100px; |
05 |
background-color: lightgray; |
06 |
position: relative; |
07 |
} |
08 |
09 |
.wheel .wheel-handle { |
10 |
-webkit-tap-highlight-color: transparent; |
11 |
background-color: dodgerblue; |
12 |
border-radius: 10px; |
13 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); |
14 |
height: 20px; |
15 |
left: 50%; |
16 |
margin: -10px 0 0 -10px; |
17 |
outline: 0; |
18 |
position: absolute; |
19 |
top: 10px; |
20 |
width: 20px; |
21 |
} |
22 |
23 |
.wheel .wheel-center { |
24 |
text-align: center; |
25 |
white-space: nowrap; |
26 |
background-color: white; |
27 |
border-radius: 80px; |
28 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); |
29 |
height: 160px; |
30 |
left: 20px; |
31 |
position: relative; |
32 |
top: 20px; |
33 |
width: 160px; |
34 |
} |
35 |
36 |
.wheel .wheel-center:before { |
37 |
content: ""; |
38 |
display: inline-block; |
39 |
height: 100%; |
40 |
vertical-align: middle; |
41 |
margin-right: -0.25em; |
42 |
/* Adjusts for spacing */ } |
43 |
44 |
.wheel .wheel-center > * { |
45 |
display: inline-block; |
46 |
vertical-align: middle; |
47 |
} |
48 |
49 |
.wheel .wheel-progress { |
50 |
height: 100%; |
51 |
left: 0; |
52 |
position: absolute; |
53 |
top: 0; |
54 |
width: 100%; |
55 |
} |
56 |
57 |
.wheel .wheel-progress:after { |
58 |
border-radius: 100px; |
59 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; |
60 |
content: ""; |
61 |
display: block; |
62 |
height: 100%; |
63 |
left: 0; |
64 |
position: absolute; |
65 |
top: 0; |
66 |
width: 100%; |
67 |
} |
68 |
69 |
.wheel .wheel-progress-fill { fill: #9dcfff; } |
4. Initialize the plugin and done.
1 |
$(".wheel").wheel(); |
5. Set the min / max values.
1 |
$(".wheel").wheel({ |
2 |
min: 0, |
3 |
max: 360 |
4 |
}); |
6. Execute a callback function after selection.
1 |
$(".wheel").wheel({ |
2 |
min: 0, |
3 |
max: 360, |
4 |
onChange: function (value) { |
5 |
$(".wheel-value").html(Math.round(value) + "°"); |
6 |
} |
7 |
}); |
7. Custom step.
1 |
$(".wheel").wheel({ |
2 |
min: 0, |
3 |
max: 360, |
4 |
step: 5, |
