@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (253) hide show
  1. package/dist/bottom-nav/bottom-nav-item.js +234 -0
  2. package/dist/bottom-nav/bottom-nav-item.js.map +7 -0
  3. package/dist/bottom-nav/bottom-nav.spec.js +122 -0
  4. package/dist/bottom-nav/bottom-nav.spec.js.map +7 -0
  5. package/dist/bottom-nav/tests/bottom-nav-colors.js +269 -358
  6. package/dist/bottom-nav/tests/bottom-nav-colors.js.map +4 -4
  7. package/dist/bottom-nav/tests/bottom-nav-items.js +168 -53
  8. package/dist/bottom-nav/tests/bottom-nav-items.js.map +4 -4
  9. package/dist/bottom-nav/tests/bottom-nav-rtl.js +153 -50
  10. package/dist/bottom-nav/tests/bottom-nav-rtl.js.map +4 -4
  11. package/dist/bottom-nav/tests/bottom-nav.js +167 -76
  12. package/dist/bottom-nav/tests/bottom-nav.js.map +4 -4
  13. package/dist/breadcrumb/breadcrumb-container.js +76 -0
  14. package/dist/breadcrumb/breadcrumb-container.js.map +7 -0
  15. package/dist/breadcrumb/breadcrumb-input-container.js +65 -0
  16. package/dist/breadcrumb/breadcrumb-input-container.js.map +7 -0
  17. package/dist/breadcrumb/breadcrumb-item-text.js +70 -0
  18. package/dist/breadcrumb/breadcrumb-item-text.js.map +7 -0
  19. package/dist/breadcrumb/breadcrumb-item.js +75 -0
  20. package/dist/breadcrumb/breadcrumb-item.js.map +7 -0
  21. package/dist/breadcrumb/breadcrumb-link.js +132 -0
  22. package/dist/breadcrumb/breadcrumb-link.js.map +7 -0
  23. package/dist/breadcrumb/breadcrumb-root-item-container.js +65 -0
  24. package/dist/breadcrumb/breadcrumb-root-item-container.js.map +7 -0
  25. package/dist/breadcrumb/breadcrumb.spec.js +125 -0
  26. package/dist/breadcrumb/breadcrumb.spec.js.map +7 -0
  27. package/dist/breadcrumb/tests/breadcrumb-rtl.js +349 -153
  28. package/dist/breadcrumb/tests/breadcrumb-rtl.js.map +4 -4
  29. package/dist/breadcrumb/tests/breadcrumb.js +349 -153
  30. package/dist/breadcrumb/tests/breadcrumb.js.map +4 -4
  31. package/dist/coloreditor/color-editor.spec.js +1586 -0
  32. package/dist/coloreditor/color-editor.spec.js.map +7 -0
  33. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js +821 -176
  34. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js.map +4 -4
  35. package/dist/coloreditor/tests/coloreditor-rtl.js +727 -265
  36. package/dist/coloreditor/tests/coloreditor-rtl.js.map +4 -4
  37. package/dist/coloreditor/tests/coloreditor-states.js +821 -176
  38. package/dist/coloreditor/tests/coloreditor-states.js.map +4 -4
  39. package/dist/coloreditor/tests/coloreditor-views.js +727 -265
  40. package/dist/coloreditor/tests/coloreditor-views.js.map +4 -4
  41. package/dist/coloreditor/tests/coloreditor.js +821 -176
  42. package/dist/coloreditor/tests/coloreditor.js.map +4 -4
  43. package/dist/colorgradient/color-contrast.js +199 -0
  44. package/dist/colorgradient/color-contrast.js.map +7 -0
  45. package/dist/colorgradient/color-gradient.spec.js +1246 -0
  46. package/dist/colorgradient/color-gradient.spec.js.map +7 -0
  47. package/dist/colorgradient/color-input.js +1029 -0
  48. package/dist/colorgradient/color-input.js.map +7 -0
  49. package/dist/colorgradient/tests/colorgradient-contrast.js +532 -155
  50. package/dist/colorgradient/tests/colorgradient-contrast.js.map +4 -4
  51. package/dist/colorgradient/tests/colorgradient-draghandle.js +536 -202
  52. package/dist/colorgradient/tests/colorgradient-draghandle.js.map +4 -4
  53. package/dist/colorgradient/tests/colorgradient-modes.js +433 -260
  54. package/dist/colorgradient/tests/colorgradient-modes.js.map +4 -4
  55. package/dist/colorgradient/tests/colorgradient-rtl.js +532 -155
  56. package/dist/colorgradient/tests/colorgradient-rtl.js.map +4 -4
  57. package/dist/colorgradient/tests/colorgradient-states.js +536 -132
  58. package/dist/colorgradient/tests/colorgradient-states.js.map +4 -4
  59. package/dist/colorgradient/tests/colorgradient.js +532 -132
  60. package/dist/colorgradient/tests/colorgradient.js.map +4 -4
  61. package/dist/colorpalette/colorpalette.spec.js +1 -1
  62. package/dist/colorpalette/colorpalette.spec.js.map +2 -2
  63. package/dist/colorpalette/tests/colorpalette-states.js +1 -1
  64. package/dist/colorpalette/tests/colorpalette-states.js.map +2 -2
  65. package/dist/colorpalette/tests/colorpalette-variants.js +1 -1
  66. package/dist/colorpalette/tests/colorpalette-variants.js.map +2 -2
  67. package/dist/colorpalette/tests/colorpalette.js +1 -1
  68. package/dist/colorpalette/tests/colorpalette.js.map +2 -2
  69. package/dist/colorpicker/tests/colorpicker-dropdown.js +757 -185
  70. package/dist/colorpicker/tests/colorpicker-dropdown.js.map +4 -4
  71. package/dist/editor/tests/editor-table-wizard.js +1984 -0
  72. package/dist/editor/tests/editor-table-wizard.js.map +7 -0
  73. package/dist/expansion-panel/expansion-panel.spec.js +253 -0
  74. package/dist/expansion-panel/expansion-panel.spec.js.map +7 -0
  75. package/dist/expansion-panel/tests/expansion-panel-rtl.js +100 -83
  76. package/dist/expansion-panel/tests/expansion-panel-rtl.js.map +4 -4
  77. package/dist/expansion-panel/tests/expansion-panel.js +100 -83
  78. package/dist/expansion-panel/tests/expansion-panel.js.map +4 -4
  79. package/dist/filemanager/tests/filemanager-contextmenu.js +492 -340
  80. package/dist/filemanager/tests/filemanager-contextmenu.js.map +4 -4
  81. package/dist/filemanager/tests/filemanager-drag-hint.js +468 -316
  82. package/dist/filemanager/tests/filemanager-drag-hint.js.map +4 -4
  83. package/dist/filemanager/tests/filemanager-gridview.js +533 -381
  84. package/dist/filemanager/tests/filemanager-gridview.js.map +4 -4
  85. package/dist/filemanager/tests/filemanager-listview.js +487 -335
  86. package/dist/filemanager/tests/filemanager-listview.js.map +4 -4
  87. package/dist/filemanager/tests/filemanager-preview.js +586 -434
  88. package/dist/filemanager/tests/filemanager-preview.js.map +4 -4
  89. package/dist/grid/tests/grid-column-menu-rtl.js +15 -15
  90. package/dist/grid/tests/grid-column-menu-rtl.js.map +2 -2
  91. package/dist/grid/tests/grid-column-menu.js +15 -15
  92. package/dist/grid/tests/grid-column-menu.js.map +2 -2
  93. package/dist/index.js +2131 -1244
  94. package/dist/index.js.map +4 -4
  95. package/dist/multiselecttree/multiselecttree.spec.js +1003 -0
  96. package/dist/multiselecttree/multiselecttree.spec.js.map +7 -0
  97. package/dist/multiselecttree/tests/multiselecttree-flat.js +1208 -0
  98. package/dist/multiselecttree/tests/multiselecttree-flat.js.map +7 -0
  99. package/dist/{editor/tests/editor-table-wizard-accessibility.js → multiselecttree/tests/multiselecttree-opened.js} +646 -645
  100. package/dist/multiselecttree/tests/multiselecttree-opened.js.map +7 -0
  101. package/dist/multiselecttree/tests/multiselecttree-outline.js +1208 -0
  102. package/dist/multiselecttree/tests/multiselecttree-outline.js.map +7 -0
  103. package/dist/multiselecttree/tests/multiselecttree-size.js +1107 -0
  104. package/dist/multiselecttree/tests/multiselecttree-size.js.map +7 -0
  105. package/dist/multiselecttree/tests/multiselecttree.js +1194 -0
  106. package/dist/multiselecttree/tests/multiselecttree.js.map +7 -0
  107. package/dist/pivotgrid/tests/pivotgrid-column-menus.js +8 -8
  108. package/dist/pivotgrid/tests/pivotgrid-column-menus.js.map +2 -2
  109. package/dist/scheduler/tests/scheduler-adaptive-agenda.js +6 -4
  110. package/dist/scheduler/tests/scheduler-adaptive-agenda.js.map +2 -2
  111. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js +6 -4
  112. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js.map +2 -2
  113. package/dist/scheduler/tests/scheduler-adaptive-day.js +6 -4
  114. package/dist/scheduler/tests/scheduler-adaptive-day.js.map +2 -2
  115. package/dist/scheduler/tests/scheduler-adaptive-month.js +6 -4
  116. package/dist/scheduler/tests/scheduler-adaptive-month.js.map +2 -2
  117. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js +8 -11
  118. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js.map +2 -2
  119. package/dist/scheduler/tests/scheduler-angular-agenda.js +8 -11
  120. package/dist/scheduler/tests/scheduler-angular-agenda.js.map +2 -2
  121. package/dist/scheduler/tests/scheduler-angular-day-rtl.js +8 -11
  122. package/dist/scheduler/tests/scheduler-angular-day-rtl.js.map +2 -2
  123. package/dist/scheduler/tests/scheduler-angular-month-rtl.js +8 -11
  124. package/dist/scheduler/tests/scheduler-angular-month-rtl.js.map +2 -2
  125. package/dist/scheduler/tests/scheduler-angular-month.js +8 -11
  126. package/dist/scheduler/tests/scheduler-angular-month.js.map +2 -2
  127. package/dist/scheduler/tests/scheduler-angular-rtl.js +8 -11
  128. package/dist/scheduler/tests/scheduler-angular-rtl.js.map +2 -2
  129. package/dist/scheduler/tests/scheduler-angular.js +8 -11
  130. package/dist/scheduler/tests/scheduler-angular.js.map +2 -2
  131. package/dist/scheduler/tests/scheduler-flex-layout.js +7 -10
  132. package/dist/scheduler/tests/scheduler-flex-layout.js.map +2 -2
  133. package/dist/scheduler/tests/scheduler-jquery-agenda.js +7 -10
  134. package/dist/scheduler/tests/scheduler-jquery-agenda.js.map +2 -2
  135. package/dist/scheduler/tests/scheduler-jquery-month.js +7 -10
  136. package/dist/scheduler/tests/scheduler-jquery-month.js.map +2 -2
  137. package/dist/scheduler/tests/scheduler-react-agenda.js +7 -10
  138. package/dist/scheduler/tests/scheduler-react-agenda.js.map +2 -2
  139. package/dist/scheduler/tests/scheduler-react-day.js +7 -10
  140. package/dist/scheduler/tests/scheduler-react-day.js.map +2 -2
  141. package/dist/scheduler/tests/scheduler-react-month.js +7 -10
  142. package/dist/scheduler/tests/scheduler-react-month.js.map +2 -2
  143. package/dist/scheduler/tests/scheduler-react-timeline-multi.js +7 -10
  144. package/dist/scheduler/tests/scheduler-react-timeline-multi.js.map +2 -2
  145. package/dist/scheduler/tests/scheduler-react-timeline.js +14 -20
  146. package/dist/scheduler/tests/scheduler-react-timeline.js.map +2 -2
  147. package/dist/scheduler/tests/scheduler-react-week.js +7 -10
  148. package/dist/scheduler/tests/scheduler-react-week.js.map +2 -2
  149. package/dist/scheduler/tests/scheduler-year.js +6 -9
  150. package/dist/scheduler/tests/scheduler-year.js.map +2 -2
  151. package/dist/scheduler/tests/scheduler.js +13 -19
  152. package/dist/scheduler/tests/scheduler.js.map +2 -2
  153. package/dist/slider/slider-tick.js +48 -0
  154. package/dist/slider/slider-tick.js.map +7 -0
  155. package/dist/slider/slider.spec.js +411 -0
  156. package/dist/slider/slider.spec.js.map +7 -0
  157. package/dist/slider/tests/slider-css-vars.js +300 -268
  158. package/dist/slider/tests/slider-css-vars.js.map +4 -4
  159. package/dist/slider/tests/slider-tick-absolute-position.js +155 -36
  160. package/dist/slider/tests/slider-tick-absolute-position.js.map +4 -4
  161. package/dist/slider/tests/slider.js +235 -209
  162. package/dist/slider/tests/slider.js.map +4 -4
  163. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js +2 -2
  164. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js.map +2 -2
  165. package/package.json +2 -2
  166. package/src/bottom-nav/bottom-nav-item.tsx +62 -0
  167. package/src/bottom-nav/bottom-nav.spec.tsx +76 -0
  168. package/src/bottom-nav/index.ts +2 -0
  169. package/src/bottom-nav/tests/bottom-nav-colors.tsx +109 -325
  170. package/src/bottom-nav/tests/bottom-nav-items.tsx +12 -22
  171. package/src/bottom-nav/tests/bottom-nav-rtl.tsx +13 -37
  172. package/src/bottom-nav/tests/bottom-nav.tsx +29 -77
  173. package/src/breadcrumb/breadcrumb-container.tsx +36 -0
  174. package/src/breadcrumb/breadcrumb-input-container.tsx +22 -0
  175. package/src/breadcrumb/breadcrumb-item-text.tsx +32 -0
  176. package/src/breadcrumb/breadcrumb-item.tsx +34 -0
  177. package/src/breadcrumb/breadcrumb-link.tsx +55 -0
  178. package/src/breadcrumb/breadcrumb-root-item-container.tsx +22 -0
  179. package/src/breadcrumb/breadcrumb.spec.tsx +55 -0
  180. package/src/breadcrumb/index.ts +7 -0
  181. package/src/breadcrumb/tests/breadcrumb-rtl.tsx +275 -231
  182. package/src/breadcrumb/tests/breadcrumb.tsx +274 -231
  183. package/src/coloreditor/color-editor.spec.tsx +93 -0
  184. package/src/coloreditor/index.ts +1 -0
  185. package/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx +2 -76
  186. package/src/coloreditor/tests/coloreditor-rtl.tsx +3 -107
  187. package/src/coloreditor/tests/coloreditor-states.tsx +2 -77
  188. package/src/coloreditor/tests/coloreditor-views.tsx +3 -107
  189. package/src/coloreditor/tests/coloreditor.tsx +2 -77
  190. package/src/colorgradient/color-contrast.tsx +44 -0
  191. package/src/colorgradient/color-gradient.spec.tsx +102 -0
  192. package/src/colorgradient/color-input.tsx +123 -0
  193. package/src/colorgradient/index.ts +4 -0
  194. package/src/colorgradient/tests/colorgradient-contrast.tsx +2 -83
  195. package/src/colorgradient/tests/colorgradient-draghandle.tsx +4 -146
  196. package/src/colorgradient/tests/colorgradient-modes.tsx +6 -214
  197. package/src/colorgradient/tests/colorgradient-rtl.tsx +2 -74
  198. package/src/colorgradient/tests/colorgradient-states.tsx +14 -51
  199. package/src/colorgradient/tests/colorgradient.tsx +2 -55
  200. package/src/colorpalette/colorpalette.spec.tsx +5 -5
  201. package/src/colorpicker/tests/colorpicker-dropdown.tsx +7 -184
  202. package/src/editor/tests/editor-table-wizard.tsx +280 -0
  203. package/src/expansion-panel/expansion-panel.spec.tsx +86 -0
  204. package/src/expansion-panel/index.ts +1 -0
  205. package/src/expansion-panel/tests/expansion-panel-rtl.tsx +48 -111
  206. package/src/expansion-panel/tests/expansion-panel.tsx +49 -111
  207. package/src/filemanager/tests/filemanager-contextmenu.tsx +9 -8
  208. package/src/filemanager/tests/filemanager-drag-hint.tsx +9 -8
  209. package/src/filemanager/tests/filemanager-gridview.tsx +17 -16
  210. package/src/filemanager/tests/filemanager-listview.tsx +17 -16
  211. package/src/filemanager/tests/filemanager-preview.tsx +25 -24
  212. package/src/grid/tests/grid-column-menu-rtl.tsx +45 -15
  213. package/src/grid/tests/grid-column-menu.tsx +45 -15
  214. package/src/index.ts +7 -4
  215. package/src/multiselecttree/index.ts +1 -0
  216. package/src/multiselecttree/multiselecttree.spec.tsx +150 -0
  217. package/src/multiselecttree/tests/multiselecttree-flat.tsx +179 -0
  218. package/src/multiselecttree/tests/multiselecttree-opened.tsx +119 -0
  219. package/src/multiselecttree/tests/multiselecttree-outline.tsx +179 -0
  220. package/src/multiselecttree/tests/multiselecttree-size.tsx +54 -0
  221. package/src/multiselecttree/tests/multiselecttree.tsx +179 -0
  222. package/src/pivotgrid/tests/pivotgrid-column-menus.tsx +24 -8
  223. package/src/scheduler/tests/scheduler-adaptive-agenda.tsx +13 -14
  224. package/src/scheduler/tests/scheduler-adaptive-day-resource-group.tsx +13 -14
  225. package/src/scheduler/tests/scheduler-adaptive-day.tsx +13 -14
  226. package/src/scheduler/tests/scheduler-adaptive-month.tsx +13 -14
  227. package/src/scheduler/tests/scheduler-angular-agenda-rtl.tsx +13 -17
  228. package/src/scheduler/tests/scheduler-angular-agenda.tsx +13 -17
  229. package/src/scheduler/tests/scheduler-angular-day-rtl.tsx +13 -17
  230. package/src/scheduler/tests/scheduler-angular-month-rtl.tsx +13 -17
  231. package/src/scheduler/tests/scheduler-angular-month.tsx +13 -17
  232. package/src/scheduler/tests/scheduler-angular-rtl.tsx +13 -17
  233. package/src/scheduler/tests/scheduler-angular.tsx +13 -17
  234. package/src/scheduler/tests/scheduler-flex-layout.tsx +10 -14
  235. package/src/scheduler/tests/scheduler-jquery-agenda.tsx +10 -14
  236. package/src/scheduler/tests/scheduler-jquery-month.tsx +10 -14
  237. package/src/scheduler/tests/scheduler-react-agenda.tsx +10 -14
  238. package/src/scheduler/tests/scheduler-react-day.tsx +10 -14
  239. package/src/scheduler/tests/scheduler-react-month.tsx +10 -14
  240. package/src/scheduler/tests/scheduler-react-timeline-multi.tsx +10 -14
  241. package/src/scheduler/tests/scheduler-react-timeline.tsx +19 -28
  242. package/src/scheduler/tests/scheduler-react-week.tsx +10 -14
  243. package/src/scheduler/tests/scheduler-year.tsx +9 -13
  244. package/src/scheduler/tests/scheduler.tsx +20 -27
  245. package/src/slider/index.ts +2 -0
  246. package/src/slider/slider-tick.tsx +52 -0
  247. package/src/slider/slider.spec.tsx +120 -0
  248. package/src/slider/tests/slider-css-vars.tsx +185 -349
  249. package/src/slider/tests/slider-tick-absolute-position.tsx +40 -64
  250. package/src/slider/tests/slider.tsx +118 -262
  251. package/src/spreadsheet/tests/spreadsheet-filter-menu.tsx +6 -2
  252. package/dist/editor/tests/editor-table-wizard-accessibility.js.map +0 -7
  253. package/src/editor/tests/editor-table-wizard-accessibility.tsx +0 -69
package/dist/slider/tests/slider-css-vars.js CHANGED
@@ -344,8 +344,124 @@
344
344
  Button.className = BUTTON_CLASSNAME;
345
345
  Button.defaultProps = defaultProps2;
346
346
 
347
- // src/slider/tests/slider-css-vars.tsx
347
+ // src/slider/slider.spec.tsx
348
348
  var import_jsx_runtime3 = __require("react/jsx-runtime");
349
+ var SLIDER_CLASSNAME = "k-slider";
350
+ var states3 = [
351
+ States.hover,
352
+ States.focus,
353
+ States.active,
354
+ States.disabled,
355
+ States.readonly
356
+ ];
357
+ var options3 = {};
358
+ var defaultProps3 = {
359
+ type: "single",
360
+ orientation: "horizontal",
361
+ readonly: false,
362
+ disabled: false,
363
+ handlePosition: "end"
364
+ };
365
+ var Slider = (props) => {
366
+ const {
367
+ type = defaultProps3.type,
368
+ orientation = defaultProps3.orientation,
369
+ readonly = defaultProps3.readonly,
370
+ disabled = defaultProps3.disabled,
371
+ handlePosition = defaultProps3.handlePosition,
372
+ hover,
373
+ focus,
374
+ active,
375
+ trackStyle,
376
+ dir
377
+ } = props;
378
+ let iconIncrease;
379
+ let iconDecrease;
380
+ if (orientation === "horizontal") {
381
+ iconIncrease = "caret-alt-right";
382
+ iconDecrease = "caret-alt-left";
383
+ } else if (orientation === "vertical") {
384
+ iconIncrease = "caret-alt-up";
385
+ iconDecrease = "caret-alt-down";
386
+ }
387
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: classNames(
388
+ SLIDER_CLASSNAME,
389
+ props.className,
390
+ stateClassNames(SLIDER_CLASSNAME, {
391
+ readonly,
392
+ disabled
393
+ }),
394
+ {
395
+ [`k-slider-${orientation}`]: orientation,
396
+ "k-colorgradient-slider": type === "gradient",
397
+ "k-range-slider": type === "range"
398
+ }
399
+ ), dir, children: [
400
+ type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
401
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
402
+ type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
403
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
404
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
405
+ type === "range" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: classNames(
406
+ "k-draghandle",
407
+ "k-draghandle-start",
408
+ stateClassNames(SLIDER_CLASSNAME, {
409
+ hover,
410
+ focus,
411
+ active
412
+ })
413
+ ) }),
414
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: classNames(
415
+ "k-draghandle",
416
+ `k-draghandle-${handlePosition}`,
417
+ stateClassNames(SLIDER_CLASSNAME, {
418
+ hover,
419
+ focus,
420
+ active
421
+ })
422
+ ) })
423
+ ] })
424
+ ] }),
425
+ type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
426
+ ] });
427
+ };
428
+ Slider.states = states3;
429
+ Slider.options = options3;
430
+ Slider.className = SLIDER_CLASSNAME;
431
+ Slider.defaultProps = defaultProps3;
432
+
433
+ // src/slider/slider-tick.tsx
434
+ var import_jsx_runtime4 = __require("react/jsx-runtime");
435
+ var SLIDER_TICK_CLASSNAME = "k-tick";
436
+ var states4 = [];
437
+ var options4 = {};
438
+ var defaultProps4 = {
439
+ label: false
440
+ };
441
+ var SliderTick = (props) => {
442
+ const {
443
+ style: style2,
444
+ label = defaultProps4.label,
445
+ orientation,
446
+ large,
447
+ text
448
+ } = props;
449
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: classNames(
450
+ props.className,
451
+ SLIDER_TICK_CLASSNAME,
452
+ {
453
+ [`k-tick-${orientation}`]: orientation,
454
+ "k-tick-large": large
455
+ }
456
+ ), style: style2, children: label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-label", children: text }) });
457
+ };
458
+ SliderTick.states = states4;
459
+ SliderTick.options = options4;
460
+ SliderTick.className = SLIDER_TICK_CLASSNAME;
461
+ SliderTick.defaultProps = defaultProps4;
462
+
463
+ // src/slider/tests/slider-css-vars.tsx
464
+ var import_jsx_runtime5 = __require("react/jsx-runtime");
349
465
  var root = import_client.default.createRoot(
350
466
  document.getElementById("app")
351
467
  );
@@ -367,280 +483,196 @@
367
483
  }
368
484
  `;
369
485
  root.render(
370
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
371
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: style }),
372
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-4", children: [
373
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Single" }),
374
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Range" }),
375
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Single RTL" }),
376
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Range RTL" }),
377
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-slider-horizontal", children: [
378
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
379
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
380
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
381
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
382
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
383
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
384
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
385
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
386
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "25" }) }),
387
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
388
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
389
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
390
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
391
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
392
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
393
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
394
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
395
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
396
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
397
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
398
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
399
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
400
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
401
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) })
402
- ] }),
403
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
404
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
405
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
406
- ] })
407
- ] }),
408
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
486
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
487
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: style }),
488
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-4", children: [
489
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Single" }),
490
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Range" }),
491
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Single RTL" }),
492
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Range RTL" }),
493
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { children: [
494
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
495
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
496
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
497
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
498
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
499
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "25" }),
500
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
501
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
502
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
503
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
504
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "50" }),
505
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
506
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
507
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
508
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
509
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "75" }),
510
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
511
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
512
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
513
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
514
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "100" })
409
515
  ] }) }),
410
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-range-slider k-slider-horizontal", children: [
411
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
412
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
413
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
414
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
415
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
416
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
417
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
418
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
419
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "25" }) }),
420
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
421
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
422
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
423
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
424
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
425
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
426
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
427
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
428
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
429
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
430
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
431
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
432
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
433
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
434
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) })
435
- ] }),
436
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
437
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
438
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-start" }),
439
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
440
- ] })
441
- ] }),
442
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
516
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { type: "range", children: [
517
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
518
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
519
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
520
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
521
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
522
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "25" }),
523
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
524
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
525
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
526
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
527
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "50" }),
528
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
529
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
530
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
531
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
532
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "75" }),
533
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
534
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
535
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
536
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
537
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "100" })
443
538
  ] }) }),
444
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-slider-horizontal", children: [
445
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
446
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
447
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
448
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
449
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
450
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
451
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
452
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
453
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "25" }) }),
454
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
455
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
456
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
457
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
458
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
459
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
460
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
461
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
462
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
463
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
464
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
465
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
466
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
467
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
468
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) })
469
- ] }),
470
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
471
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
472
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
473
- ] })
474
- ] }),
475
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
539
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { dir: "rtl", children: [
540
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
541
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
542
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
543
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
544
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
545
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "25" }),
546
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
547
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
548
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
549
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
550
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "50" }),
551
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
552
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
553
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
554
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
555
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "75" }),
556
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
557
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
558
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
559
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
560
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "100" })
476
561
  ] }) }),
477
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-range-slider k-slider-horizontal", children: [
478
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
479
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
480
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
481
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
482
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
483
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
484
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
485
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
486
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "25" }) }),
487
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
488
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
489
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
490
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
491
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
492
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
493
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
494
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
495
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
496
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
497
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
498
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
499
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
500
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
501
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) })
502
- ] }),
503
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
504
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
505
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-start" }),
506
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
507
- ] })
508
- ] }),
509
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
562
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { type: "range", dir: "rtl", children: [
563
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
564
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
565
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
566
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
567
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
568
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "25" }),
569
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
570
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
571
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
572
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
573
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "50" }),
574
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
575
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
576
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
577
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
578
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "75" }),
579
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
580
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
581
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
582
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
583
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "100" })
510
584
  ] }) }),
511
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-slider-vertical", children: [
512
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-down", rounded: "full", className: "k-button-decrease" }),
513
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
514
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
515
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
516
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
517
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
518
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
519
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
520
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "25" }) }),
521
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
522
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
523
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
524
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
525
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
526
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
527
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
528
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
529
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
530
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
531
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
532
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
533
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
534
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
535
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) })
536
- ] }),
537
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
538
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
539
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
540
- ] })
541
- ] }),
542
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-up", rounded: "full", className: "k-button-increase" })
585
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { orientation: "vertical", children: [
586
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
587
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
588
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
589
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
590
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
591
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "25" }),
592
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
593
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
594
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
595
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
596
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "50" }),
597
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
598
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
599
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
600
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
601
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "75" }),
602
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
603
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
604
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
605
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
606
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "100" })
543
607
  ] }) }),
544
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-range-slider k-slider-vertical", children: [
545
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-down", rounded: "full", className: "k-button-decrease" }),
546
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
547
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
548
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
549
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
550
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
551
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
552
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
553
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "25" }) }),
554
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
555
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
556
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
557
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
558
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
559
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
560
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
561
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
562
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
563
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
564
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
565
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
566
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
567
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
568
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) })
569
- ] }),
570
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
571
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
572
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-start" }),
573
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
574
- ] })
575
- ] }),
576
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-up", rounded: "full", className: "k-button-increase" })
608
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { type: "range", orientation: "vertical", children: [
609
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
610
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
611
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
612
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
613
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
614
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "25" }),
615
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
616
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
617
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
618
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
619
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "50" }),
620
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
621
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
622
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
623
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
624
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "75" }),
625
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
626
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
627
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
628
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
629
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "100" })
577
630
  ] }) }),
578
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-slider-vertical", children: [
579
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-down", rounded: "full", className: "k-button-decrease" }),
580
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
581
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
582
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
583
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
584
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
585
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
586
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
587
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "25" }) }),
588
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
589
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
590
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
591
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
592
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
593
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
594
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
595
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
596
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
597
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
598
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
599
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
600
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
601
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
602
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) })
603
- ] }),
604
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
605
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
606
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
607
- ] })
608
- ] }),
609
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-up", rounded: "full", className: "k-button-increase" })
631
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { orientation: "vertical", dir: "rtl", children: [
632
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
633
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
634
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
635
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
636
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
637
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "25" }),
638
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
639
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
640
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
641
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
642
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "50" }),
643
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
644
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
645
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
646
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
647
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "75" }),
648
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
649
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
650
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
651
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
652
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "100" })
610
653
  ] }) }),
611
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-widget k-slider k-range-slider k-slider-vertical", children: [
612
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-down", rounded: "full", className: "k-button-decrease" }),
613
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
614
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
615
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
616
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
617
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
618
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
619
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
620
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "25" }) }),
621
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
622
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
623
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
624
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
625
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "50" }) }),
626
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
627
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
628
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
629
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
630
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "75" }) }),
631
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
632
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
633
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
634
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
635
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "100" }) })
636
- ] }),
637
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
638
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
639
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-start" }),
640
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
641
- ] })
642
- ] }),
643
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-up", rounded: "full", className: "k-button-increase" })
654
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { type: "range", orientation: "vertical", dir: "rtl", children: [
655
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
656
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
657
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
658
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
659
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
660
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "25" }),
661
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
662
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
663
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
664
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
665
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "50" }),
666
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
667
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
668
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
669
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
670
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "75" }),
671
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
672
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
673
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
674
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
675
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "100" })
644
676
  ] }) })
645
677
  ] })
646
678
  ] })