├── app.css
├── README.md
├── index.html
└── app.js
/app.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | padding: 0;
5 | margin: 0;
6 | }
7 |
8 | body {
9 | min-height: 100vh;
10 | background-color: #f8f9fa;
11 | display: flex;
12 | justify-content: center;
13 | font-family: 'Raleway', sans-serif;
14 | }
15 |
16 | .container {
17 | padding: 5% 1.5rem;
18 | max-width: 800px;
19 | width: 100%;
20 | }
21 |
22 | #app {
23 | display: flex;
24 | flex-wrap: wrap;
25 | }
26 |
27 | h1 {
28 | margin-bottom: 2rem;
29 | font-size: 3rem;
30 | }
31 |
32 | .slider__legend {
33 | padding: 1rem 3rem 0 0;
34 | list-style: none;
35 | }
36 |
37 | .slider__legend h2 {
38 | margin-bottom: 1rem;
39 | }
40 |
41 | .slider__legend li {
42 | display: flex;
43 | margin-bottom: 1rem;
44 | }
45 |
46 | .slider__legend li span {
47 | display: inline-block;
48 | }
49 |
50 | .slider__legend li span:first-child {
51 | height: 20px;
52 | width: 20px;
53 | margin-bottom: -2px;
54 | }
55 |
56 | .slider__legend li span:nth-child(2) {
57 | margin: 0 0.5rem;
58 | }
59 |
60 | .slider__legend li span:last-child {
61 | font-size: 1.25rem;
62 | font-weight: 600;
63 | font-variant-numeric: tabular-nums lining-nums;
64 | min-width: 60px;
65 | }
66 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript Concentric Range Slider
2 |
3 | This slider is built with vanilla JS. It's reusable, customizable and easy to use.
4 |
5 | ## Getting started
6 |
7 | To use the range slider plugin, simply include the app.js in your HTML file:
8 |
9 | ```
10 |
11 | ```
12 |
13 | Then, create a new range slider instance by calling the Slider constructor and passing in the options:
14 |
15 | ```javascript
16 | const slider = new Slider(options);
17 | ```
18 |
19 | Pass in the DOM element where you want the slider to appear. Then, pass in as many sliders as you need to the sliders array. Each slider object has several options for customization.
20 |
21 | ```javascript
22 | const options = {
23 | DOMselector: string,
24 | sliders: [
25 | {
26 | radius: number,
27 | min: number,
28 | max: number,
29 | step: number,
30 | initialValue: number,
31 | color: string,
32 | displayName: string
33 | }
34 | ]
35 | };
36 | ```
37 |
38 | * selector -> your container selector (i.e. #mySlider, can be any valid selector)
39 | * sliders -> array of options objects for sliders
40 | * radius -> radius of the slider (i.e. 100)
41 | * min -> minimum value of the slider (i.e. 100)
42 | * max -> maximum value of the slider (i.e. 100)
43 | * step -> value step (i.e. 10)
44 | * initialValue -> value of the slider on initialization (i.e. 50)
45 | * color -> color of the slider (valid hex code value)
46 | * displayName -> name of the legend item (any string)
47 |
48 | Call the draw method() on the new instance of the Slider class.
49 |
50 | ```javascript
51 | slider.draw();
52 | ```
53 |
54 | That's it!
55 |
56 | ## Special thanks to
57 | Sabine - for finding a bug in the calculation of the relative client coordinates and pointing it out!
58 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | JS Round Range Slider App
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
JS Round Range Slider App
18 |
19 |
20 |
21 |