lavkach3

1
$(function () {
2
  // Handles
3
  var handlesSlider = document.getElementById("slider-handles");
4

5
  noUiSlider.create(handlesSlider, {
6
    start: [4000, 8000],
7
    range: {
8
      min: [2000],
9
      max: [10000],
10
    },
11
  });
12

13
  // Range
14
  var rangeSlider = document.getElementById("slider-range");
15

16
  noUiSlider.create(rangeSlider, {
17
    start: [4000],
18
    range: {
19
      min: [2000],
20
      max: [10000],
21
    },
22
  });
23

24
  // Stepping and snapping to values
25
  var stepSlider = document.getElementById("slider-step");
26

27
  noUiSlider.create(stepSlider, {
28
    start: [4000],
29
    step: 1000,
30
    range: {
31
      min: [2000],
32
      max: [10000],
33
    },
34
  });
35

36
  // Non-linear sliders
37
  var nonLinearSlider = document.getElementById("slider-non-linear");
38

39
  noUiSlider.create(nonLinearSlider, {
40
    start: [4000],
41
    range: {
42
      min: [2000],
43
      "30%": [4000],
44
      "70%": [8000],
45
      max: [10000],
46
    },
47
  });
48

49
  // Stepping in non-linear sliders
50
  var nonLinearStepSlider = document.getElementById("slider-non-linear-step");
51

52
  noUiSlider.create(nonLinearStepSlider, {
53
    start: [500, 4000],
54
    range: {
55
      min: [0],
56
      "10%": [500, 500],
57
      "50%": [4000, 1000],
58
      max: [10000],
59
    },
60
  });
61

62
  // Snapping between steps
63
  var snapSlider = document.getElementById("slider-snap");
64

65
  noUiSlider.create(snapSlider, {
66
    start: [0, 500],
67
    snap: true,
68
    connect: true,
69
    range: {
70
      min: 0,
71
      "10%": 50,
72
      "20%": 100,
73
      "30%": 150,
74
      "40%": 500,
75
      "50%": 800,
76
      max: 1000,
77
    },
78
  });
79

80
  // Tap
81
  tapSlider = document.getElementById("tap");
82

83
  noUiSlider.create(tapSlider, {
84
    start: 40,
85
    behaviour: "tap",
86
    connect: "upper",
87
    range: {
88
      min: 20,
89
      max: 80,
90
    },
91
  });
92

93
  // Drag
94
  var dragSlider = document.getElementById("drag");
95

96
  noUiSlider.create(dragSlider, {
97
    start: [40, 60],
98
    behaviour: "drag",
99
    connect: true,
100
    range: {
101
      min: 20,
102
      max: 80,
103
    },
104
  });
105

106
  // Fixed dragging
107
  dragFixedSlider = document.getElementById("drag-fixed");
108

109
  noUiSlider.create(dragFixedSlider, {
110
    start: [40, 60],
111
    behaviour: "drag-fixed",
112
    connect: true,
113
    range: {
114
      min: 20,
115
      max: 80,
116
    },
117
  });
118

119
  // Snap
120
  snapSlider = document.getElementById("snap");
121

122
  noUiSlider.create(snapSlider, {
123
    start: 40,
124
    behaviour: "snap",
125
    connect: "lower",
126
    range: {
127
      min: 20,
128
      max: 80,
129
    },
130
  });
131

132
  // Hover
133
  var hoverSlider = document.getElementById("hover"),
134
    field = document.getElementById("hover-val");
135

136
  noUiSlider.create(hoverSlider, {
137
    start: 20,
138
    behaviour: "hover-snap",
139
    range: {
140
      min: 0,
141
      max: 10,
142
    },
143
  });
144

145
  hoverSlider.noUiSlider.on("hover", function (value) {
146
    field.innerHTML = value;
147
  });
148

149
  // Combined options
150
  dragTapSlider = document.getElementById("combined");
151

152
  noUiSlider.create(dragTapSlider, {
153
    start: [40, 60],
154
    behaviour: "drag-tap",
155
    connect: true,
156
    range: {
157
      min: 20,
158
      max: 80,
159
    },
160
  });
161

162
  var range_all_sliders = {
163
    min: [0],
164
    "10%": [5, 5],
165
    "50%": [40, 10],
166
    max: [100],
167
  };
168

169
  // Range
170
  var pipsRange = document.getElementById("pips-range"),
171
    pipsRangeRtl = document.getElementById("pips-range-rtl");
172

173
  noUiSlider.create(pipsRange, {
174
    range: range_all_sliders,
175
    start: 0,
176
    pips: {
177
      mode: "range",
178
      density: 3,
179
    },
180
  });
181

182
  noUiSlider.create(pipsRangeRtl, {
183
    range: range_all_sliders,
184
    start: 0,
185
    direction: "rtl",
186
    pips: {
187
      mode: "range",
188
      density: 3,
189
    },
190
  });
191

192
  // Steps
193

194
  function filter500(value, type) {
195
    return value % 1000 ? 2 : 1;
196
  }
197

198
  var pipsStepsFilter = document.getElementById("pips-steps-filter");
199

200
  noUiSlider.create(pipsStepsFilter, {
201
    range: range_all_sliders,
202
    start: 0,
203
    pips: {
204
      mode: "steps",
205
      density: 3,
206
      filter: filter500,
207
      format: wNumb({
208
        decimals: 2,
209
        prefix: "$",
210
      }),
211
    },
212
  });
213

214
  // Default
215
  var defaultColorSlider = document.getElementById("default-color-slider");
216

217
  noUiSlider.create(defaultColorSlider, {
218
    start: [45, 55],
219
    behaviour: "drag",
220
    connect: true,
221
    range: {
222
      min: 20,
223
      max: 80,
224
    },
225
  });
226

227
  // Success
228
  var successColorSlider = document.getElementById("success-color-slider");
229

230
  noUiSlider.create(successColorSlider, {
231
    start: [40, 60],
232
    behaviour: "drag",
233
    connect: true,
234
    range: {
235
      min: 20,
236
      max: 80,
237
    },
238
  });
239

240
  // Info
241
  var infoColorSlider = document.getElementById("info-color-slider");
242

243
  noUiSlider.create(infoColorSlider, {
244
    start: [35, 65],
245
    behaviour: "drag",
246
    connect: true,
247
    range: {
248
      min: 20,
249
      max: 80,
250
    },
251
  });
252

253
  // Warning
254
  var warningColorSlider = document.getElementById("warning-color-slider");
255

256
  noUiSlider.create(warningColorSlider, {
257
    start: [45, 55],
258
    behaviour: "drag",
259
    connect: true,
260
    range: {
261
      min: 20,
262
      max: 80,
263
    },
264
  });
265

266
  // Danger
267
  var dangerColorSlider = document.getElementById("danger-color-slider");
268

269
  noUiSlider.create(dangerColorSlider, {
270
    start: [40, 60],
271
    behaviour: "drag",
272
    connect: true,
273
    range: {
274
      min: 20,
275
      max: 80,
276
    },
277
  });
278

279
  // Custom Color
280
  var customColorSlider = document.getElementById("custom-color-slider");
281

282
  noUiSlider.create(customColorSlider, {
283
    start: [35, 65],
284
    behaviour: "drag",
285
    connect: true,
286
    range: {
287
      min: 20,
288
      max: 80,
289
    },
290
  });
291

292
  // Extra large options
293
  var xl_options = {
294
    start: [45, 55],
295
    behaviour: "drag",
296
    connect: true,
297
    range: {
298
      min: 20,
299
      max: 80,
300
    },
301
  };
302

303
  var lg_options = {
304
    start: [40, 60],
305
    behaviour: "drag",
306
    connect: true,
307
    range: {
308
      min: 20,
309
      max: 80,
310
    },
311
  };
312

313
  var default_options = {
314
    start: [35, 65],
315
    behaviour: "drag",
316
    connect: true,
317
    range: {
318
      min: 20,
319
      max: 80,
320
    },
321
  };
322

323
  var sm_options = {
324
    start: [30, 70],
325
    behaviour: "drag",
326
    connect: true,
327
    range: {
328
      min: 20,
329
      max: 80,
330
    },
331
  };
332

333
  var xs_options = {
334
    start: [25, 75],
335
    behaviour: "drag",
336
    connect: true,
337
    range: {
338
      min: 20,
339
      max: 80,
340
    },
341
  };
342

343
  // Extra Large
344
  var extraLargeSlider = document.getElementById("extra-large-slider");
345
  var circleExtraLargeSlider = document.getElementById(
346
    "circle-extra-large-slider"
347
  );
348
  var squareExtraLargeSlider = document.getElementById(
349
    "square-extra-large-slider"
350
  );
351

352
  noUiSlider.create(extraLargeSlider, xl_options);
353
  noUiSlider.create(circleExtraLargeSlider, xl_options);
354
  noUiSlider.create(squareExtraLargeSlider, xl_options);
355

356
  // Large
357
  var largeSlider = document.getElementById("large-slider");
358
  var circleLargeSlider = document.getElementById("circle-large-slider");
359
  var squareLargeSlider = document.getElementById("square-large-slider");
360

361
  noUiSlider.create(largeSlider, lg_options);
362
  noUiSlider.create(circleLargeSlider, lg_options);
363
  noUiSlider.create(squareLargeSlider, lg_options);
364

365
  // Default
366
  var defaultSlider = document.getElementById("default-slider");
367
  var circleDefaultSlider = document.getElementById("circle-default-slider");
368
  var squareDefaultSlider = document.getElementById("square-default-slider");
369

370
  noUiSlider.create(defaultSlider, default_options);
371
  noUiSlider.create(circleDefaultSlider, default_options);
372
  noUiSlider.create(squareDefaultSlider, default_options);
373

374
  // Small
375
  var smallSlider = document.getElementById("small-slider");
376
  var circleSmallSlider = document.getElementById("circle-small-slider");
377
  var squareSmallSlider = document.getElementById("square-small-slider");
378

379
  noUiSlider.create(smallSlider, sm_options);
380
  noUiSlider.create(circleSmallSlider, sm_options);
381
  noUiSlider.create(squareSmallSlider, sm_options);
382

383
  // Extra Small
384
  var extraSmallSlider = document.getElementById("extra-small-slider");
385
  var circleExtraSmallSlider = document.getElementById(
386
    "circle-extra-small-slider"
387
  );
388
  var squareExtraSmallSlider = document.getElementById(
389
    "square-extra-small-slider"
390
  );
391

392
  noUiSlider.create(extraSmallSlider, xs_options);
393
  noUiSlider.create(circleExtraSmallSlider, xs_options);
394
  noUiSlider.create(squareExtraSmallSlider, xs_options);
395

396
  // Default
397
  var vertical_slider_1 = document.getElementById("slider-vertical-1");
398

399
  noUiSlider.create(vertical_slider_1, {
400
    start: 20,
401
    orientation: "vertical",
402
    range: {
403
      min: 0,
404
      max: 100,
405
    },
406
  });
407

408
  var vertical_slider_2 = document.getElementById("slider-vertical-2");
409

410
  noUiSlider.create(vertical_slider_2, {
411
    start: 50,
412
    orientation: "vertical",
413
    range: {
414
      min: 0,
415
      max: 100,
416
    },
417
  });
418

419
  var vertical_slider_3 = document.getElementById("slider-vertical-3");
420

421
  noUiSlider.create(vertical_slider_3, {
422
    start: 20,
423
    orientation: "vertical",
424
    range: {
425
      min: 0,
426
      max: 100,
427
    },
428
  });
429

430
  var vertical_slider_4 = document.getElementById("slider-vertical-4");
431

432
  noUiSlider.create(vertical_slider_4, {
433
    start: 50,
434
    orientation: "vertical",
435
    range: {
436
      min: 0,
437
      max: 100,
438
    },
439
  });
440

441
  var vertical_slider_5 = document.getElementById("slider-vertical-5");
442

443
  noUiSlider.create(vertical_slider_5, {
444
    start: 20,
445
    orientation: "vertical",
446
    range: {
447
      min: 0,
448
      max: 100,
449
    },
450
  });
451

452
  // Connect to lower
453
  var connectLowerSlider1 = document.getElementById("connect-lower-1");
454

455
  noUiSlider.create(connectLowerSlider1, {
456
    start: 30,
457
    orientation: "vertical",
458
    connect: "lower",
459
    range: {
460
      min: 0,
461
      max: 100,
462
    },
463
  });
464

465
  var connectLowerSlider2 = document.getElementById("connect-lower-2");
466

467
  noUiSlider.create(connectLowerSlider2, {
468
    start: 40,
469
    orientation: "vertical",
470
    connect: "lower",
471
    range: {
472
      min: 0,
473
      max: 100,
474
    },
475
  });
476

477
  var connectLowerSlider3 = document.getElementById("connect-lower-3");
478

479
  noUiSlider.create(connectLowerSlider3, {
480
    start: 50,
481
    orientation: "vertical",
482
    connect: "lower",
483
    range: {
484
      min: 0,
485
      max: 100,
486
    },
487
  });
488

489
  var connectLowerSlider4 = document.getElementById("connect-lower-4");
490

491
  noUiSlider.create(connectLowerSlider4, {
492
    start: 60,
493
    orientation: "vertical",
494
    connect: "lower",
495
    range: {
496
      min: 0,
497
      max: 100,
498
    },
499
  });
500

501
  var connectLowerSlider5 = document.getElementById("connect-lower-5");
502

503
  noUiSlider.create(connectLowerSlider5, {
504
    start: 70,
505
    orientation: "vertical",
506
    connect: "lower",
507
    range: {
508
      min: 0,
509
      max: 100,
510
    },
511
  });
512

513
  // Connect to upper
514
  var connectUpperSlider1 = document.getElementById("connect-upper-1");
515

516
  noUiSlider.create(connectUpperSlider1, {
517
    start: 30,
518
    orientation: "vertical",
519
    connect: "upper",
520
    range: {
521
      min: 0,
522
      max: 100,
523
    },
524
  });
525

526
  var connectUpperSlider2 = document.getElementById("connect-upper-2");
527

528
  noUiSlider.create(connectUpperSlider2, {
529
    start: 40,
530
    orientation: "vertical",
531
    connect: "upper",
532
    range: {
533
      min: 0,
534
      max: 100,
535
    },
536
  });
537

538
  var connectUpperSlider3 = document.getElementById("connect-upper-3");
539

540
  noUiSlider.create(connectUpperSlider3, {
541
    start: 50,
542
    orientation: "vertical",
543
    connect: "upper",
544
    range: {
545
      min: 0,
546
      max: 100,
547
    },
548
  });
549

550
  var connectUpperSlider4 = document.getElementById("connect-upper-4");
551

552
  noUiSlider.create(connectUpperSlider4, {
553
    start: 60,
554
    orientation: "vertical",
555
    connect: "upper",
556
    range: {
557
      min: 0,
558
      max: 100,
559
    },
560
  });
561

562
  var connectUpperSlider5 = document.getElementById("connect-upper-5");
563

564
  noUiSlider.create(connectUpperSlider5, {
565
    start: 70,
566
    orientation: "vertical",
567
    connect: "upper",
568
    range: {
569
      min: 0,
570
      max: 100,
571
    },
572
  });
573

574
  // Tooltips
575
  var tooltipSlider1 = document.getElementById("slider-tooltips-1");
576

577
  noUiSlider.create(tooltipSlider1, {
578
    start: [20, 80],
579
    orientation: "vertical",
580
    tooltips: [
581
      false,
582
      wNumb({
583
        decimals: 1,
584
      }),
585
    ],
586
    range: {
587
      min: 0,
588
      max: 100,
589
    },
590
  });
591

592
  var tooltipSlider2 = document.getElementById("slider-tooltips-2");
593

594
  noUiSlider.create(tooltipSlider2, {
595
    start: [20, 80],
596
    orientation: "vertical",
597
    tooltips: [
598
      false,
599
      wNumb({
600
        decimals: 1,
601
      }),
602
    ],
603
    range: {
604
      min: 0,
605
      max: 100,
606
    },
607
  });
608

609
  var tooltipSlider3 = document.getElementById("slider-tooltips-3");
610

611
  noUiSlider.create(tooltipSlider3, {
612
    start: [20, 80],
613
    orientation: "vertical",
614
    tooltips: [
615
      false,
616
      wNumb({
617
        decimals: 1,
618
      }),
619
    ],
620
    range: {
621
      min: 0,
622
      max: 100,
623
    },
624
  });
625

626
  // Direction top to bottom
627
  var directionTopBottom1 = document.getElementById(
628
    "slider-direction-top-bottom-1"
629
  );
630

631
  noUiSlider.create(directionTopBottom1, {
632
    range: range_all_sliders,
633
    start: 30,
634
    connect: "lower",
635
    orientation: "vertical",
636
    pips: {
637
      mode: "range",
638
      density: 5,
639
    },
640
  });
641

642
  var directionTopBottom2 = document.getElementById(
643
    "slider-direction-top-bottom-2"
644
  );
645

646
  noUiSlider.create(directionTopBottom2, {
647
    range: range_all_sliders,
648
    start: 50,
649
    connect: "lower",
650
    orientation: "vertical",
651
    pips: {
652
      mode: "range",
653
      density: 5,
654
    },
655
  });
656

657
  var directionTopBottom3 = document.getElementById(
658
    "slider-direction-top-bottom-3"
659
  );
660

661
  noUiSlider.create(directionTopBottom3, {
662
    range: range_all_sliders,
663
    start: 70,
664
    connect: "lower",
665
    orientation: "vertical",
666
    pips: {
667
      mode: "range",
668
      density: 5,
669
    },
670
  });
671

672
  // Direction bottom to top
673
  var directionBottomTop1 = document.getElementById(
674
    "slider-direction-bottom-top-1"
675
  );
676

677
  noUiSlider.create(directionBottomTop1, {
678
    range: range_all_sliders,
679
    start: 70,
680
    connect: "lower",
681
    orientation: "vertical",
682
    direction: "rtl",
683
    pips: {
684
      mode: "range",
685
      density: 5,
686
    },
687
  });
688

689
  var directionBottomTop2 = document.getElementById(
690
    "slider-direction-bottom-top-2"
691
  );
692

693
  noUiSlider.create(directionBottomTop2, {
694
    range: range_all_sliders,
695
    start: 50,
696
    connect: "lower",
697
    orientation: "vertical",
698
    direction: "rtl",
699
    pips: {
700
      mode: "range",
701
      density: 5,
702
    },
703
  });
704

705
  var directionBottomTop3 = document.getElementById(
706
    "slider-direction-bottom-top-3"
707
  );
708

709
  noUiSlider.create(directionBottomTop3, {
710
    range: range_all_sliders,
711
    start: 30,
712
    connect: "lower",
713
    orientation: "vertical",
714
    direction: "rtl",
715
    pips: {
716
      mode: "range",
717
      density: 5,
718
    },
719
  });
720

721
  // Margin
722
  var verticalMarginSlider1 = document.getElementById("vertical-margin-1");
723

724
  noUiSlider.create(verticalMarginSlider1, {
725
    start: [40, 60],
726
    orientation: "vertical",
727
    margin: 20,
728
    range: {
729
      min: 0,
730
      max: 100,
731
    },
732
  });
733

734
  var verticalMarginSlider2 = document.getElementById("vertical-margin-2");
735

736
  noUiSlider.create(verticalMarginSlider2, {
737
    start: [35, 65],
738
    orientation: "vertical",
739
    margin: 30,
740
    range: {
741
      min: 0,
742
      max: 100,
743
    },
744
  });
745

746
  var verticalMarginSlider3 = document.getElementById("vertical-margin-3");
747

748
  noUiSlider.create(verticalMarginSlider3, {
749
    start: [30, 70],
750
    orientation: "vertical",
751
    margin: 30,
752
    range: {
753
      min: 0,
754
      max: 100,
755
    },
756
  });
757

758
  var verticalMarginSlider4 = document.getElementById("vertical-margin-4");
759

760
  noUiSlider.create(verticalMarginSlider4, {
761
    start: [25, 75],
762
    orientation: "vertical",
763
    margin: 30,
764
    range: {
765
      min: 0,
766
      max: 100,
767
    },
768
  });
769

770
  var verticalMarginSlider5 = document.getElementById("vertical-margin-5");
771

772
  noUiSlider.create(verticalMarginSlider5, {
773
    start: [20, 80],
774
    orientation: "vertical",
775
    margin: 30,
776
    range: {
777
      min: 0,
778
      max: 100,
779
    },
780
  });
781

782
  // Limit
783
  var verticalLimitSlider1 = document.getElementById("vertical-limit-1");
784

785
  noUiSlider.create(verticalLimitSlider1, {
786
    start: [40, 60],
787
    orientation: "vertical",
788
    limit: 40,
789
    behaviour: "drag",
790
    connect: true,
791
    range: {
792
      min: 0,
793
      max: 100,
794
    },
795
  });
796

797
  var verticalLimitSlider2 = document.getElementById("vertical-limit-2");
798

799
  noUiSlider.create(verticalLimitSlider2, {
800
    start: [35, 65],
801
    orientation: "vertical",
802
    limit: 40,
803
    behaviour: "drag",
804
    connect: true,
805
    range: {
806
      min: 0,
807
      max: 100,
808
    },
809
  });
810

811
  var verticalLimitSlider3 = document.getElementById("vertical-limit-3");
812

813
  noUiSlider.create(verticalLimitSlider3, {
814
    start: [30, 70],
815
    orientation: "vertical",
816
    limit: 50,
817
    behaviour: "drag",
818
    connect: true,
819
    range: {
820
      min: 0,
821
      max: 100,
822
    },
823
  });
824

825
  var verticalLimitSlider4 = document.getElementById("vertical-limit-4");
826

827
  noUiSlider.create(verticalLimitSlider4, {
828
    start: [25, 75],
829
    orientation: "vertical",
830
    limit: 50,
831
    behaviour: "drag",
832
    connect: true,
833
    range: {
834
      min: 0,
835
      max: 100,
836
    },
837
  });
838

839
  var verticalLimitSlider5 = document.getElementById("vertical-limit-5");
840

841
  noUiSlider.create(verticalLimitSlider5, {
842
    start: [20, 80],
843
    orientation: "vertical",
844
    limit: 70,
845
    behaviour: "drag",
846
    connect: true,
847
    range: {
848
      min: 0,
849
      max: 100,
850
    },
851
  });
852

853
  // Step
854
  var stepsOptions = {
855
    start: [20, 80],
856
    orientation: "vertical",
857
    step: 10,
858
    range: {
859
      min: 0,
860
      max: 100,
861
    },
862
  };
863

864
  var verticalStepSlider1 = document.getElementById("vertical-steps-1");
865
  noUiSlider.create(verticalStepSlider1, stepsOptions);
866

867
  var verticalStepSlider2 = document.getElementById("vertical-steps-2");
868
  noUiSlider.create(verticalStepSlider2, stepsOptions);
869

870
  var verticalStepSlider3 = document.getElementById("vertical-steps-3");
871
  noUiSlider.create(verticalStepSlider3, stepsOptions);
872

873
  var verticalStepSlider4 = document.getElementById("vertical-steps-4");
874
  noUiSlider.create(verticalStepSlider4, stepsOptions);
875

876
  var verticalStepSlider5 = document.getElementById("vertical-steps-5");
877
  noUiSlider.create(verticalStepSlider5, stepsOptions);
878

879
  // Extra large options
880
  var vertical_xl_options = {
881
    start: [45, 55],
882
    behaviour: "drag",
883
    connect: true,
884
    orientation: "vertical",
885
    range: {
886
      min: 20,
887
      max: 80,
888
    },
889
  };
890

891
  var vertical_lg_options = {
892
    start: [40, 60],
893
    behaviour: "drag",
894
    connect: true,
895
    orientation: "vertical",
896
    range: {
897
      min: 20,
898
      max: 80,
899
    },
900
  };
901

902
  var vertical_default_options = {
903
    start: [35, 65],
904
    behaviour: "drag",
905
    connect: true,
906
    orientation: "vertical",
907
    range: {
908
      min: 20,
909
      max: 80,
910
    },
911
  };
912

913
  var vertical_sm_options = {
914
    start: [30, 70],
915
    behaviour: "drag",
916
    connect: true,
917
    orientation: "vertical",
918
    range: {
919
      min: 20,
920
      max: 80,
921
    },
922
  };
923

924
  var vertical_xs_options = {
925
    start: [25, 75],
926
    behaviour: "drag",
927
    connect: true,
928
    orientation: "vertical",
929
    range: {
930
      min: 20,
931
      max: 80,
932
    },
933
  };
934

935
  // Extra Large
936
  var vertExtraLargeSlider = document.getElementById("vert-extra-large-slider");
937
  var vertCircleExtraLargeSlider = document.getElementById(
938
    "vert-circle-extra-large-slider"
939
  );
940
  var vertSquareExtraLargeSlider = document.getElementById(
941
    "vert-square-extra-large-slider"
942
  );
943

944
  noUiSlider.create(vertExtraLargeSlider, vertical_xl_options);
945
  noUiSlider.create(vertCircleExtraLargeSlider, vertical_xl_options);
946
  noUiSlider.create(vertSquareExtraLargeSlider, vertical_xl_options);
947

948
  // Large
949
  var vertLargeSlider = document.getElementById("vert-large-slider");
950
  var vertCircleLargeSlider = document.getElementById(
951
    "vert-circle-large-slider"
952
  );
953
  var vertSquareLargeSlider = document.getElementById(
954
    "vert-square-large-slider"
955
  );
956

957
  noUiSlider.create(vertLargeSlider, vertical_lg_options);
958
  noUiSlider.create(vertCircleLargeSlider, vertical_lg_options);
959
  noUiSlider.create(vertSquareLargeSlider, vertical_lg_options);
960

961
  // Default
962
  var vertDefaultSlider = document.getElementById("vert-default-slider");
963
  var vertCircleDefaultSlider = document.getElementById(
964
    "vert-circle-default-slider"
965
  );
966
  var vertSquareDefaultSlider = document.getElementById(
967
    "vert-square-default-slider"
968
  );
969

970
  noUiSlider.create(vertDefaultSlider, vertical_default_options);
971
  noUiSlider.create(vertCircleDefaultSlider, vertical_default_options);
972
  noUiSlider.create(vertSquareDefaultSlider, vertical_default_options);
973

974
  // Small
975
  var vertSmallSlider = document.getElementById("vert-small-slider");
976
  var vertCircleSmallSlider = document.getElementById(
977
    "vert-circle-small-slider"
978
  );
979
  var vertSquareSmallSlider = document.getElementById(
980
    "vert-square-small-slider"
981
  );
982

983
  noUiSlider.create(vertSmallSlider, vertical_sm_options);
984
  noUiSlider.create(vertCircleSmallSlider, vertical_sm_options);
985
  noUiSlider.create(vertSquareSmallSlider, vertical_sm_options);
986

987
  // Extra Small
988
  var vertExtraSmallSlider = document.getElementById("vert-extra-small-slider");
989
  var vertCircleExtraSmallSlider = document.getElementById(
990
    "vert-circle-extra-small-slider"
991
  );
992
  var vertSquareExtraSmallSlider = document.getElementById(
993
    "vert-square-extra-small-slider"
994
  );
995

996
  noUiSlider.create(vertExtraSmallSlider, vertical_xs_options);
997
  noUiSlider.create(vertCircleExtraSmallSlider, vertical_xs_options);
998
  noUiSlider.create(vertSquareExtraSmallSlider, vertical_xs_options);
999
});
1000