-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
559 lines (414 loc) · 35.1 KB
/
index.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
<!DOCTYPE html>
<html lang="en">
<head>
<title>React Round Slider</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- google fonts -->
<!--<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
<link id="favicon-48" rel="icon" type="image/png" sizes="48x48" href="/img/favicon/favicon-48.png" />
<link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
<link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
<link rel="stylesheet" href="/css/styles.1690020865143.css" />
<!--<link rel="stylesheet" href="/js/index.1690020865143.css" />-->
</head>
<body class="font-josefin_sans text-lg text-gray-100 hp-bg dark" id="special-page">
<div class="flex justify-center items-center top-message mb-2">
<p class="text-center p-2 text-sm">
🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/react-round-slider" class="underline">GitHub repository</a> 🤩</p>
</div>
<header class="py-4 px-10 flex items-center justify-between">
<div class="flex items-center">
<a href="/" title="" class="inline-flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
stroke-width="3.48" stroke="rgba(255, 255, 255, 1)"
class="mr-4"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle cx="50%" cy="50%" r="50%" stroke="none" stroke-width="0" fill="rgba(40, 95, 104, 1)"/>
<g transform="translate(3.36, 3.36) scale(0.72)">
<g transform="rotate(25.2 12 12)">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 20v-16l6 14l6 -14v16"/>
</g>
</g>
</svg>
React Round Slider
</a>
</div>
<div class="flex items-center">
<a href="/pages/basic-usage.html" title="" class="mx-2 inline-block">Documentation</a>
<!--<a href="/pages/plugins.html" title="" class="mx-2 hidden md:inline-block">Plugins</a>-->
<a href="https://github.com/mzusin/react-round-slider" class="border-l border-l-gray-600 pl-4 mx-2 inline-block text-slate-400 hover:text-slate-500"><span class="sr-only">React Round Slider on GitHub</span><svg viewBox="0 0 16 16" class="w-5 h-5" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a>
</div>
</header>
<div id="hp-main">
<!-- top section -->
<section class="relative max-w-5xl mx-auto pt-20 sm:pt-24 lg:pt-32 mb-20">
<h1 class="text-slate-100 font-extrabold text-4xl sm:text-5xl lg:text-6xl tracking-tight text-center px-4">React Round Slider</h1>
<p class="mt-6 sm:text-2xl lg:text-3x text-slate-400 text-center max-w-3xl mx-auto px-4 pb-14">Experience an accessible and mobile-friendly React Round Slider library, powered by TypeScript and SVG</p>
<div id="horseshoe-slider" class="flex justify-center"></div>
<div class="flex justify-center space-x-6 text-sm">
<a class="get-started-btn bg-slate-100 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-200 focus:ring-offset-2 focus:ring-offset-slate-50 text-gray-900 font-semibold px-14 py-5 text-lg rounded-lg flex items-center justify-center sm:w-auto" href="/pages/basic-usage.html">
Documentation →
</a>
</div>
</section>
<!-- Precision and Flexibility -->
<section class="py-10 lg:py-24 mt-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-20">
<div class="order-2 lg:order-1">
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="m7 8-4 4 4 4m10-8 4 4-4 4M14 4l-4 16"></path>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">ES6/TypeScript</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">Precision and Flexibility</p>
<p class="mt-4 max-w-3xl space-y-6">Benefit from TypeScript's strong typing and enjoy the flexibility to customize your slider with SVG elements, creating a slider that perfectly suits your needs.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8 pt-px" href="/pages/basic-usage.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
<div class="max-w-full order-1 lg:order-2">
<div id="color-slider" class="flex justify-center"></div>
</div>
</div>
</section>
<!-- Multiple Pointers -->
<section>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 my-24 grid lg:grid-cols-2 gap-20 my-24">
<div class="text-gray-200 text-sm rounded-xl overflow-hidden flex flex-col max-w-full shadow-xl">
<div class="bg-slate-900 px-4 py-2 relative flex items-center">
<ul class="flex absolute">
<li class="bg-red-500 rounded-full w-2.5 h-2.5 mr-2"></li>
<li class="bg-amber-400 rounded-full w-2.5 h-2.5 mr-2"></li>
<li class="bg-lime-500 rounded-full w-2.5 h-2.5 mr-2"></li>
</ul>
<div class="flex-1 text-center">Range Slider</div>
</div>
<div class="bg-slate-800 flex-1 py-4 px-2">
<pre><code class="break-space hljs language-tsx" style="background: #1E293B"><span class="hljs-tag">
const [pointers, setPointers] = useState<ISettingsPointer[]>([
{ value: 0, radius: 25, bgColor: '#c20cff' },
{ value: 25, radius: 20, bgColor: '#4be28c' }
]);
return (
<RoundSlider
pointers={ pointers }
onChange={ setPointers }
/>
);
</span></code></pre>
</div>
</div>
<div>
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<circle cx="5" cy="12" r="1"></circle>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">Knobs</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">Multiple Pointers</p>
<p class="mt-4 max-w-3xl space-y-6">The library support any number of pointers (knobs/handles). You can fine-tune each pointer's appearance, color, and behavior with ease, adapting the slider to fit your unique project requirements.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8 pt-px" href="/pages/individual-pointer-settings.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
</div>
</section>
<!-- aaa -->
<section class="py-10 lg:py-24 my-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-20">
<div>
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M12 21v-4m0-4V9m0-4V3m-2 18h4M8 5v4h11l2-2-2-2zm6 8v4H6l-2-2 2-2z" fill="rgba(255, 255, 255, 0.8)"></path>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">Slider Type</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">Direction & Orientation</p>
<p class="mt-4 max-w-3xl space-y-6">The library supports horizontal and <a class="underline" href="/pages/vertical-slider.html" title="">vertical orientation</a>. It also supports left to right and <a class="underline" href="/pages/right-to-left-support.html" title="">right to left</a> directions for a horizontal slider, and top to bottom and <a class="underline" href="/pages/vertical-slider.html" title="">bottom to top</a> for vertical sliders.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="/pages/vertical-slider.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
<div class="text-gray-200 text-sm rounded-xl overflow-hidden flex flex-col max-w-full shadow-xl">
<div class="bg-slate-900 px-4 py-2 relative flex items-center">
<ul class="flex absolute">
<li class="bg-red-500 rounded-full w-2.5 h-2.5 mr-2"></li>
<li class="bg-amber-400 rounded-full w-2.5 h-2.5 mr-2"></li>
<li class="bg-lime-500 rounded-full w-2.5 h-2.5 mr-2"></li>
</ul>
<div class="flex-1 text-center">Range Slider</div>
</div>
<div class="bg-slate-800 flex-1 p-4" style="background-color: #4d2852">
<pre><code class="break-space hljs language-xml" style="background-color: inherit"><span class="hljs-tag"><<span class="hljs-name">tc-range-slider</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">"vertical"</span>
<span class="hljs-attr">value1</span>=<span class="hljs-string">"30"</span>
<span class="hljs-attr">value2</span>=<span class="hljs-string">"70"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tc-range-slider</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tc-range-slider</span>
<span class="hljs-attr">rtl</span>=<span class="hljs-string">"true"</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span>
<span class="hljs-attr">generate-labels</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tc-range-slider</span>></span></code></pre>
</div>
</div>
</div>
</section>
<!-- aaa -->
<section>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 my-24 grid lg:grid-cols-2 gap-20 my-24">
<img src="/img/homepage/technology.jpeg" alt="" title="" class="max-w-full rounded-xl shadow-xl border-8 border-sky-100">
<div>
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="80%" height="80%" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect width="14" height="14" x="7" y="3" rx="2" fill="rgba(255, 255, 255, 0.5)"></rect>
<circle cx="14" cy="8" r="2"></circle>
<path d="M17 17v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2"></path>
<path d="M12 12a2 2 0 1 0 4 0V8"></path>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">Data</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">Numbers, Text, or Range</p>
<p class="mt-4 max-w-3xl space-y-6">The slider range can be defined by a minimum and maximum numbers. Another option is to provide a list of individual (discrete) values. Both text and numeric data are supported.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="/pages/list-of-individual-values-and-text-data.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
</div>
</section>
<!-- aaa -->
<section class="py-10 lg:py-24 mb-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-20">
<div class="order-2 lg:order-1">
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="80%" height="80%" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M12 21a9 9 0 1 1 0-18 9 8 0 0 1 9 8 4.5 4 0 0 1-4.5 4H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21" fill="rgba(255, 255, 255, 0.3)"></path>
<circle cx="7.5" cy="10.5" r=".5" fill="currentColor"></circle>
<circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle>
<circle cx="16.5" cy="10.5" r=".5" fill="currentColor"></circle>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">Styles</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">Styles, Design, Animation</p>
<p class="mt-4 max-w-3xl space-y-6">The library has multiple options for customizing the appearance of the slider. <a class="underline" href="/pages/width-height-and-border-radius.html" title="">Width, height, border radius</a>, <a class="underline" href="/pages/colors.html" title="">colors, hover and focus</a>, and other properties can be customized using the slider attributes. <a class="underline" href="/pages/images-and-svgs-as-pointers.html" title="">Images and SVGs</a> can be used as pointers. It has a standalone <a class="underline" href="/pages/moving-tooltip-plugin.html" title="">moving tooltip plugin</a>.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="/pages/colors.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
<img src="/img/homepage/styles.jpeg" alt="" title="" class="max-w-full rounded-xl shadow-xl border-8 border-white order-1 lg:order-2">
</div>
</section>
<!-- aaa -->
<section>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 my-24 grid lg:grid-cols-2 gap-20 my-24">
<img src="/img/homepage/themes.jpeg" alt="" title="" class="max-w-full rounded-xl shadow-xl">
<div>
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M15 8h.01"></path>
<rect width="16" height="16" x="4" y="4" rx="3" fill="rgba(255, 255, 255, 0.8)"></rect>
<path d="m4 15 4-4a3 5 0 0 1 3 0l5 5" fill="rgba(255, 255, 255, 0.8)"></path>
<path d="m14 14 1-1a3 5 0 0 1 3 0l2 2" fill="rgba(255, 255, 255, 0.8)"></path>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">Predefined Styles</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">Themes</p>
<p class="mt-4 max-w-3xl space-y-6">The library has additional <a class="underline" href="/pages/themes.html" title="">theme</a> plugins with a ready-made set of styles such as gradients, glass, pointer shapes and more. It's also possible to <a class="underline" href="/pages/css-themes.html" title="">develop your own theme</a> as an external plugin.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="/pages/themes.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
</div>
</section>
<!-- aaa -->
<section class="py-10 lg:py-24 mb-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-20">
<div class="order-2 lg:order-1">
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect width="4" height="3" x="10" y="19" rx="1" fill="rgba(255, 255, 255, 0.3)"></rect>
<path d="M12 16c3.314 0 6-4.686 6-8A6 6 0 1 0 6 8c0 3.314 2.686 8 6 8z" fill="rgba(255, 255, 255, 0.3)"></path>
<ellipse cx="12" cy="9" rx="2" ry="7" fill="rgba(255, 255, 255, 0.5)"></ellipse>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">CSS Frameworks</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">No CSS Conflicts</p>
<p class="mt-4 max-w-3xl space-y-6">Plays well with CSS frameworks like Bootstrap and others. No CSS conflicts with other styles due to the web components nature of the library.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="/pages/basic-usage.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
<img src="/img/homepage/no-css-conflicts.png" alt="" title="" class="max-w-full rounded-xl shadow-xl border-8 border-white order-1 lg:order-2">
</div>
</section>
<!-- aaa -->
<section>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 my-24 grid lg:grid-cols-2 gap-20 my-24">
<img src="/img/homepage/advanced-features.jpeg" alt="" title="" class="max-w-full rounded-xl shadow-xl border-8 border-sky-100">
<div>
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<circle cx="14" cy="6" r="2" fill="rgba(255, 255, 255, 0.8)"></circle>
<path d="M4 6h8m4 0h4"></path>
<circle cx="8" cy="12" r="2" fill="rgba(255, 255, 255, 0.8)"></circle>
<path d="M4 12h2m4 0h10"></path>
<circle cx="17" cy="18" r="2" fill="rgba(255, 255, 255, 0.8)"></circle>
<path d="M4 18h11m4 0h1"></path>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">Advanced</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">Advanced Features</p>
<p class="mt-4 max-w-3xl space-y-6">The slider has a large set of advanced features such as: the ability to <a class="underline" href="/pages/disabled.html" title="">disable</a> the entire slider or individual knobs; <a class="underline" href="/pages/range-dragging.html" title="">range dragging</a> support; <a class="underline" href="/pages/non-linear-step.html" title="">non-linear</a> range slider support; <a class="underline" href="/pages/pointers-overlap.html" title="">pointers overlap</a>; pointers <a class="underline" href="/pages/max-and-min-pointers-distance.html" title="">max and min distance</a>, and more. Simple dynamic rendering after ajax requests or delays/timeouts. <a class="underline" href="/pages/origin-at-center-plugin.html" title="">Origin at center plugin</a>.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="/pages/range-dragging.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
</div>
</section>
<!-- aaa -->
<section class="py-10 lg:py-24 my-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-20">
<div>
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" class="icon icon-tabler icon-tabler-devices" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<ellipse cx="12" cy="6" rx="8" ry="3" fill="rgba(255, 255, 255, 0.5)"></ellipse>
<path d="M4 6v6c0 1.657 3.582 3 8 3a19.84 19.84 0 0 0 3.302-.267M20 12V6"></path>
<path d="M4 12v6c0 1.599 3.335 2.905 7.538 2.995M20 14v-2m-6 7h7m-3-3 3 3-3 3"></path>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">Storage</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">Local & Session Storage</p>
<p class="mt-4 max-w-3xl space-y-6">Local storage and session storage support as a standalone plugin. The user selection will be saved and restored after page refresh or navigation from other pages.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="/pages/storage.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
<div class="text-gray-200 text-sm rounded-xl overflow-hidden flex flex-col max-w-full shadow-xl">
<div class="bg-slate-900 px-4 py-2 relative flex items-center">
<ul class="flex absolute">
<li class="bg-red-500 rounded-full w-2.5 h-2.5 mr-2"></li>
<li class="bg-amber-400 rounded-full w-2.5 h-2.5 mr-2"></li>
<li class="bg-lime-500 rounded-full w-2.5 h-2.5 mr-2"></li>
</ul>
<div class="flex-1 text-center">Range Slider</div>
</div>
<div class="bg-slate-800 flex-1 p-4" style="background-color: #202b5e">
<pre><code class="break-space hljs language-xml" style="background-color: inherit"><span class="hljs-tag"><<span class="hljs-name">tc-range-slider</span>
<span class="hljs-attr">value1</span>=<span class="hljs-string">"30"</span>
<span class="hljs-attr">value2</span>=<span class="hljs-string">"70"</span>
<span class="hljs-attr">storage</span>=<span class="hljs-string">"local-storage"</span>
<span class="hljs-attr">generate-labels</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tc-range-slider</span>></span></code></pre>
</div>
</div>
</div>
</section>
<!-- aaa -->
<section>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 my-24 grid lg:grid-cols-2 gap-20 my-24">
<div class="text-gray-200 text-sm rounded-xl overflow-hidden flex flex-col max-w-full shadow-xl">
<div class="bg-slate-900 px-4 py-2 relative flex items-center">
<ul class="flex absolute">
<li class="bg-red-500 rounded-full w-2.5 h-2.5 mr-2"></li>
<li class="bg-amber-400 rounded-full w-2.5 h-2.5 mr-2"></li>
<li class="bg-lime-500 rounded-full w-2.5 h-2.5 mr-2"></li>
</ul>
<div class="flex-1 text-center">Range Slider</div>
</div>
<div class="bg-slate-800 flex-1 p-4">
<pre><code class="break-space hljs language-javascript" style="background: #1E293B"><span class="hljs-comment">// get the reference</span>
<span class="hljs-keyword">const</span> $slider = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'slider-1'</span>);
<span class="hljs-comment">// listen to the change event</span>
$slider.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-function">(<span class="hljs-params">evt</span>) =></span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(evt.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>);
});
<span class="hljs-comment">// change value</span>
$slider.<span class="hljs-property">value</span> = <span class="hljs-number">50</span>;
<span class="hljs-comment">// get value</span>
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>($slider.<span class="hljs-property">value</span>);</code></pre>
</div>
</div>
<div>
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="m7 8-4 4 4 4m10-8 4 4-4 4M14 4l-4 16"></path>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">No dependencies</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">ES6 & Typescript</p>
<p class="mt-4 max-w-3xl space-y-6">The library is built with Typescript and does not use external dependencies. The core is 28KB minified or 9KB compressed (GZip).</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="/pages/basic-usage.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
</div>
</section>
<!-- aaa -->
<section class="py-10 lg:py-24 my-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-20">
<div class="order-2 lg:order-1">
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-xl overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" class="icon icon-tabler icon-tabler-devices" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M4 7h3a1 1 0 0 0 1-1V5a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-1a2 2 0 0 0-4 0v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a2 2 0 0 0 0-4H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1" fill="rgba(255, 255, 255, 0.5)"></path>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">Development</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">API & Plugins</p>
<p class="mt-4 max-w-3xl space-y-6">The library has a rich set of different APIs and events. Almost any property can be changed with JavaScript. The functionality of the core library can be extended using plugins. There are also several ready-made plugins, such as the auto-generated labels plugin.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="/pages/javascript-plugins.html">Learn more<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
<img src="/img/homepage/api.jpeg" alt="" title="" class="max-w-full rounded-xl shadow-xl border-8 border-white order-1 lg:order-2">
</div>
</section>
<!-- aaa -->
<section>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 my-24 grid lg:grid-cols-2 gap-20 my-24">
<img src="/img/homepage/gift.jpeg" alt="" title="" class="max-w-full rounded-xl shadow-xl border-8 border-lime-100">
<div>
<!-- thumb -->
<div class="w-16 h-16 rounded-full ring-1 ring-slate-900/10 shadow-md overflow-hidden flex items-center justify-center text-slate-400 bg-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="80%" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect width="18" height="4" x="3" y="8" rx="1"></rect>
<path d="M12 8v13m7-9v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7m2.5-4a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" fill="rgba(255, 255, 255, 0.5)"></path>
</svg>
</div>
<h2 class="mt-8 font-semibold text-sky-500">Free</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-400 font-extrabold tracking-tight">MIT License</p>
<p class="mt-4 max-w-3xl space-y-6">The library is free to use in any personal or commercial project.</p>
<a class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8" href="https://github.com/mzusin/toolcool-range-slider/blob/main/LICENSE">Read License<svg class="overflow-visible ml-3 text-sky-300 group-hover:text-sky-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg></a>
</div>
</div>
</section>
<!-- footer -->
<footer class="px-4 py-4 py-6">
<div class="flex flex-wrap items-center justify-center text-center px-4 py-3">
<span class="flex items-center justify-center mx-4 my-2">
<a class="ml-2 underline" href="/">Tool Cool Range Slider</a>
</span>
<span class="flex items-center justify-center mx-4 my-2">© All rights reserved.</span>
<a href="mailto:miriam.zusin@gmail.com" title="" class="mx-4 my-2 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
<path fill="#111" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path>
</svg> <span class="ml-2 underline">Contact Us</span>
</a>
</div>
</footer>
</div>
<script src="/js/index.1690020865143.js"></script>
</body>
</html>