@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/src/slider/tests/slider-css-vars.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import ReactDOM from 'react-dom/client';
2
- import { Button } from '../../button';
2
+ import { Slider, SliderTick } from '../../slider';
3
3
 
4
4
  const root = ReactDOM.createRoot(
5
5
  document.getElementById('app') as HTMLElement
@@ -35,370 +35,206 @@ root.render(
35
35
 
36
36
 
37
37
  <section>
38
- <div className="k-widget k-slider k-slider-horizontal">
39
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
40
- <div className="k-slider-track-wrap">
41
- <ul className="k-reset k-slider-items">
42
- <li className="k-tick k-tick-large">
43
- <span className="k-label">0</span>
44
- </li>
45
- <li className="k-tick"></li>
46
- <li className="k-tick"></li>
47
- <li className="k-tick"></li>
48
- <li className="k-tick"></li>
49
- <li className="k-tick k-tick-large">
50
- <span className="k-label">25</span>
51
- </li>
52
- <li className="k-tick"></li>
53
- <li className="k-tick"></li>
54
- <li className="k-tick"></li>
55
- <li className="k-tick"></li>
56
- <li className="k-tick k-tick-large">
57
- <span className="k-label">50</span>
58
- </li>
59
- <li className="k-tick"></li>
60
- <li className="k-tick"></li>
61
- <li className="k-tick"></li>
62
- <li className="k-tick"></li>
63
- <li className="k-tick k-tick-large">
64
- <span className="k-label">75</span>
65
- </li>
66
- <li className="k-tick"></li>
67
- <li className="k-tick"></li>
68
- <li className="k-tick"></li>
69
- <li className="k-tick"></li>
70
- <li className="k-tick k-tick-large">
71
- <span className="k-label">100</span>
72
- </li>
73
- </ul>
74
- <div className="k-slider-track">
75
- <div className="k-slider-selection"></div>
76
- <a href="#" className="k-draghandle k-draghandle-end"></a>
77
- </div>
78
- </div>
79
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
80
- </div>
38
+ <Slider>
39
+ <SliderTick label large text="0"/>
40
+ <SliderTick />
41
+ <SliderTick />
42
+ <SliderTick />
43
+ <SliderTick />
44
+ <SliderTick label large text="25"/>
45
+ <SliderTick />
46
+ <SliderTick />
47
+ <SliderTick />
48
+ <SliderTick />
49
+ <SliderTick label large text="50"/>
50
+ <SliderTick />
51
+ <SliderTick />
52
+ <SliderTick />
53
+ <SliderTick />
54
+ <SliderTick label large text="75"/>
55
+ <SliderTick />
56
+ <SliderTick />
57
+ <SliderTick />
58
+ <SliderTick />
59
+ <SliderTick label large text="100"/>
60
+ </Slider>
81
61
  </section>
82
62
  <section>
83
- <div className="k-widget k-slider k-range-slider k-slider-horizontal">
84
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
85
- <div className="k-slider-track-wrap">
86
- <ul className="k-reset k-slider-items">
87
- <li className="k-tick k-tick-large">
88
- <span className="k-label">0</span>
89
- </li>
90
- <li className="k-tick"></li>
91
- <li className="k-tick"></li>
92
- <li className="k-tick"></li>
93
- <li className="k-tick"></li>
94
- <li className="k-tick k-tick-large">
95
- <span className="k-label">25</span>
96
- </li>
97
- <li className="k-tick"></li>
98
- <li className="k-tick"></li>
99
- <li className="k-tick"></li>
100
- <li className="k-tick"></li>
101
- <li className="k-tick k-tick-large">
102
- <span className="k-label">50</span>
103
- </li>
104
- <li className="k-tick"></li>
105
- <li className="k-tick"></li>
106
- <li className="k-tick"></li>
107
- <li className="k-tick"></li>
108
- <li className="k-tick k-tick-large">
109
- <span className="k-label">75</span>
110
- </li>
111
- <li className="k-tick"></li>
112
- <li className="k-tick"></li>
113
- <li className="k-tick"></li>
114
- <li className="k-tick"></li>
115
- <li className="k-tick k-tick-large">
116
- <span className="k-label">100</span>
117
- </li>
118
- </ul>
119
- <div className="k-slider-track">
120
- <div className="k-slider-selection"></div>
121
- <a href="#" className="k-draghandle k-draghandle-start"></a>
122
- <a href="#" className="k-draghandle k-draghandle-end"></a>
123
- </div>
124
- </div>
125
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
126
- </div>
63
+ <Slider type="range">
64
+ <SliderTick label large text="0"/>
65
+ <SliderTick />
66
+ <SliderTick />
67
+ <SliderTick />
68
+ <SliderTick />
69
+ <SliderTick label large text="25"/>
70
+ <SliderTick />
71
+ <SliderTick />
72
+ <SliderTick />
73
+ <SliderTick />
74
+ <SliderTick label large text="50"/>
75
+ <SliderTick />
76
+ <SliderTick />
77
+ <SliderTick />
78
+ <SliderTick />
79
+ <SliderTick label large text="75"/>
80
+ <SliderTick />
81
+ <SliderTick />
82
+ <SliderTick />
83
+ <SliderTick />
84
+ <SliderTick label large text="100"/>
85
+ </Slider>
127
86
  </section>
128
87
  <section dir="rtl">
129
- <div className="k-widget k-slider k-slider-horizontal">
130
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
131
- <div className="k-slider-track-wrap">
132
- <ul className="k-reset k-slider-items">
133
- <li className="k-tick k-tick-large">
134
- <span className="k-label">0</span>
135
- </li>
136
- <li className="k-tick"></li>
137
- <li className="k-tick"></li>
138
- <li className="k-tick"></li>
139
- <li className="k-tick"></li>
140
- <li className="k-tick k-tick-large">
141
- <span className="k-label">25</span>
142
- </li>
143
- <li className="k-tick"></li>
144
- <li className="k-tick"></li>
145
- <li className="k-tick"></li>
146
- <li className="k-tick"></li>
147
- <li className="k-tick k-tick-large">
148
- <span className="k-label">50</span>
149
- </li>
150
- <li className="k-tick"></li>
151
- <li className="k-tick"></li>
152
- <li className="k-tick"></li>
153
- <li className="k-tick"></li>
154
- <li className="k-tick k-tick-large">
155
- <span className="k-label">75</span>
156
- </li>
157
- <li className="k-tick"></li>
158
- <li className="k-tick"></li>
159
- <li className="k-tick"></li>
160
- <li className="k-tick"></li>
161
- <li className="k-tick k-tick-large">
162
- <span className="k-label">100</span>
163
- </li>
164
- </ul>
165
- <div className="k-slider-track">
166
- <div className="k-slider-selection"></div>
167
- <a href="#" className="k-draghandle k-draghandle-end"></a>
168
- </div>
169
- </div>
170
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
171
- </div>
88
+ <Slider dir="rtl">
89
+ <SliderTick label large text="0"/>
90
+ <SliderTick />
91
+ <SliderTick />
92
+ <SliderTick />
93
+ <SliderTick />
94
+ <SliderTick label large text="25"/>
95
+ <SliderTick />
96
+ <SliderTick />
97
+ <SliderTick />
98
+ <SliderTick />
99
+ <SliderTick label large text="50"/>
100
+ <SliderTick />
101
+ <SliderTick />
102
+ <SliderTick />
103
+ <SliderTick />
104
+ <SliderTick label large text="75"/>
105
+ <SliderTick />
106
+ <SliderTick />
107
+ <SliderTick />
108
+ <SliderTick />
109
+ <SliderTick label large text="100"/>
110
+ </Slider>
172
111
  </section>
173
112
  <section dir="rtl">
174
- <div className="k-widget k-slider k-range-slider k-slider-horizontal">
175
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
176
- <div className="k-slider-track-wrap">
177
- <ul className="k-reset k-slider-items">
178
- <li className="k-tick k-tick-large">
179
- <span className="k-label">0</span>
180
- </li>
181
- <li className="k-tick"></li>
182
- <li className="k-tick"></li>
183
- <li className="k-tick"></li>
184
- <li className="k-tick"></li>
185
- <li className="k-tick k-tick-large">
186
- <span className="k-label">25</span>
187
- </li>
188
- <li className="k-tick"></li>
189
- <li className="k-tick"></li>
190
- <li className="k-tick"></li>
191
- <li className="k-tick"></li>
192
- <li className="k-tick k-tick-large">
193
- <span className="k-label">50</span>
194
- </li>
195
- <li className="k-tick"></li>
196
- <li className="k-tick"></li>
197
- <li className="k-tick"></li>
198
- <li className="k-tick"></li>
199
- <li className="k-tick k-tick-large">
200
- <span className="k-label">75</span>
201
- </li>
202
- <li className="k-tick"></li>
203
- <li className="k-tick"></li>
204
- <li className="k-tick"></li>
205
- <li className="k-tick"></li>
206
- <li className="k-tick k-tick-large">
207
- <span className="k-label">100</span>
208
- </li>
209
- </ul>
210
- <div className="k-slider-track">
211
- <div className="k-slider-selection"></div>
212
- <a href="#" className="k-draghandle k-draghandle-start"></a>
213
- <a href="#" className="k-draghandle k-draghandle-end"></a>
214
- </div>
215
- </div>
216
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
217
- </div>
113
+ <Slider type="range" dir="rtl">
114
+ <SliderTick label large text="0"/>
115
+ <SliderTick />
116
+ <SliderTick />
117
+ <SliderTick />
118
+ <SliderTick />
119
+ <SliderTick label large text="25"/>
120
+ <SliderTick />
121
+ <SliderTick />
122
+ <SliderTick />
123
+ <SliderTick />
124
+ <SliderTick label large text="50"/>
125
+ <SliderTick />
126
+ <SliderTick />
127
+ <SliderTick />
128
+ <SliderTick />
129
+ <SliderTick label large text="75"/>
130
+ <SliderTick />
131
+ <SliderTick />
132
+ <SliderTick />
133
+ <SliderTick />
134
+ <SliderTick label large text="100"/>
135
+ </Slider>
218
136
  </section>
219
137
 
220
138
 
221
139
  <section>
222
- <div className="k-widget k-slider k-slider-vertical">
223
- <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
224
- <div className="k-slider-track-wrap">
225
- <ul className="k-reset k-slider-items">
226
- <li className="k-tick k-tick-large">
227
- <span className="k-label">0</span>
228
- </li>
229
- <li className="k-tick"></li>
230
- <li className="k-tick"></li>
231
- <li className="k-tick"></li>
232
- <li className="k-tick"></li>
233
- <li className="k-tick k-tick-large">
234
- <span className="k-label">25</span>
235
- </li>
236
- <li className="k-tick"></li>
237
- <li className="k-tick"></li>
238
- <li className="k-tick"></li>
239
- <li className="k-tick"></li>
240
- <li className="k-tick k-tick-large">
241
- <span className="k-label">50</span>
242
- </li>
243
- <li className="k-tick"></li>
244
- <li className="k-tick"></li>
245
- <li className="k-tick"></li>
246
- <li className="k-tick"></li>
247
- <li className="k-tick k-tick-large">
248
- <span className="k-label">75</span>
249
- </li>
250
- <li className="k-tick"></li>
251
- <li className="k-tick"></li>
252
- <li className="k-tick"></li>
253
- <li className="k-tick"></li>
254
- <li className="k-tick k-tick-large">
255
- <span className="k-label">100</span>
256
- </li>
257
- </ul>
258
- <div className="k-slider-track">
259
- <div className="k-slider-selection"></div>
260
- <a href="#" className="k-draghandle k-draghandle-end"></a>
261
- </div>
262
- </div>
263
- <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
264
- </div>
140
+ <Slider orientation="vertical">
141
+ <SliderTick label large text="0"/>
142
+ <SliderTick />
143
+ <SliderTick />
144
+ <SliderTick />
145
+ <SliderTick />
146
+ <SliderTick label large text="25"/>
147
+ <SliderTick />
148
+ <SliderTick />
149
+ <SliderTick />
150
+ <SliderTick />
151
+ <SliderTick label large text="50"/>
152
+ <SliderTick />
153
+ <SliderTick />
154
+ <SliderTick />
155
+ <SliderTick />
156
+ <SliderTick label large text="75"/>
157
+ <SliderTick />
158
+ <SliderTick />
159
+ <SliderTick />
160
+ <SliderTick />
161
+ <SliderTick label large text="100"/>
162
+ </Slider>
265
163
  </section>
266
164
  <section>
267
- <div className="k-widget k-slider k-range-slider k-slider-vertical">
268
- <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
269
- <div className="k-slider-track-wrap">
270
- <ul className="k-reset k-slider-items">
271
- <li className="k-tick k-tick-large">
272
- <span className="k-label">0</span>
273
- </li>
274
- <li className="k-tick"></li>
275
- <li className="k-tick"></li>
276
- <li className="k-tick"></li>
277
- <li className="k-tick"></li>
278
- <li className="k-tick k-tick-large">
279
- <span className="k-label">25</span>
280
- </li>
281
- <li className="k-tick"></li>
282
- <li className="k-tick"></li>
283
- <li className="k-tick"></li>
284
- <li className="k-tick"></li>
285
- <li className="k-tick k-tick-large">
286
- <span className="k-label">50</span>
287
- </li>
288
- <li className="k-tick"></li>
289
- <li className="k-tick"></li>
290
- <li className="k-tick"></li>
291
- <li className="k-tick"></li>
292
- <li className="k-tick k-tick-large">
293
- <span className="k-label">75</span>
294
- </li>
295
- <li className="k-tick"></li>
296
- <li className="k-tick"></li>
297
- <li className="k-tick"></li>
298
- <li className="k-tick"></li>
299
- <li className="k-tick k-tick-large">
300
- <span className="k-label">100</span>
301
- </li>
302
- </ul>
303
- <div className="k-slider-track">
304
- <div className="k-slider-selection"></div>
305
- <a href="#" className="k-draghandle k-draghandle-start"></a>
306
- <a href="#" className="k-draghandle k-draghandle-end"></a>
307
- </div>
308
- </div>
309
- <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
310
- </div>
165
+ <Slider type="range" orientation="vertical">
166
+ <SliderTick label large text="0"/>
167
+ <SliderTick />
168
+ <SliderTick />
169
+ <SliderTick />
170
+ <SliderTick />
171
+ <SliderTick label large text="25"/>
172
+ <SliderTick />
173
+ <SliderTick />
174
+ <SliderTick />
175
+ <SliderTick />
176
+ <SliderTick label large text="50"/>
177
+ <SliderTick />
178
+ <SliderTick />
179
+ <SliderTick />
180
+ <SliderTick />
181
+ <SliderTick label large text="75"/>
182
+ <SliderTick />
183
+ <SliderTick />
184
+ <SliderTick />
185
+ <SliderTick />
186
+ <SliderTick label large text="100"/>
187
+ </Slider>
311
188
  </section>
312
189
  <section dir="rtl">
313
- <div className="k-widget k-slider k-slider-vertical">
314
- <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
315
- <div className="k-slider-track-wrap">
316
- <ul className="k-reset k-slider-items">
317
- <li className="k-tick k-tick-large">
318
- <span className="k-label">0</span>
319
- </li>
320
- <li className="k-tick"></li>
321
- <li className="k-tick"></li>
322
- <li className="k-tick"></li>
323
- <li className="k-tick"></li>
324
- <li className="k-tick k-tick-large">
325
- <span className="k-label">25</span>
326
- </li>
327
- <li className="k-tick"></li>
328
- <li className="k-tick"></li>
329
- <li className="k-tick"></li>
330
- <li className="k-tick"></li>
331
- <li className="k-tick k-tick-large">
332
- <span className="k-label">50</span>
333
- </li>
334
- <li className="k-tick"></li>
335
- <li className="k-tick"></li>
336
- <li className="k-tick"></li>
337
- <li className="k-tick"></li>
338
- <li className="k-tick k-tick-large">
339
- <span className="k-label">75</span>
340
- </li>
341
- <li className="k-tick"></li>
342
- <li className="k-tick"></li>
343
- <li className="k-tick"></li>
344
- <li className="k-tick"></li>
345
- <li className="k-tick k-tick-large">
346
- <span className="k-label">100</span>
347
- </li>
348
- </ul>
349
- <div className="k-slider-track">
350
- <div className="k-slider-selection"></div>
351
- <a href="#" className="k-draghandle k-draghandle-end"></a>
352
- </div>
353
- </div>
354
- <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
355
- </div>
190
+ <Slider orientation="vertical" dir="rtl">
191
+ <SliderTick label large text="0"/>
192
+ <SliderTick />
193
+ <SliderTick />
194
+ <SliderTick />
195
+ <SliderTick />
196
+ <SliderTick label large text="25"/>
197
+ <SliderTick />
198
+ <SliderTick />
199
+ <SliderTick />
200
+ <SliderTick />
201
+ <SliderTick label large text="50"/>
202
+ <SliderTick />
203
+ <SliderTick />
204
+ <SliderTick />
205
+ <SliderTick />
206
+ <SliderTick label large text="75"/>
207
+ <SliderTick />
208
+ <SliderTick />
209
+ <SliderTick />
210
+ <SliderTick />
211
+ <SliderTick label large text="100"/>
212
+ </Slider>
356
213
  </section>
357
214
  <section dir="rtl">
358
- <div className="k-widget k-slider k-range-slider k-slider-vertical">
359
- <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
360
- <div className="k-slider-track-wrap">
361
- <ul className="k-reset k-slider-items">
362
- <li className="k-tick k-tick-large">
363
- <span className="k-label">0</span>
364
- </li>
365
- <li className="k-tick"></li>
366
- <li className="k-tick"></li>
367
- <li className="k-tick"></li>
368
- <li className="k-tick"></li>
369
- <li className="k-tick k-tick-large">
370
- <span className="k-label">25</span>
371
- </li>
372
- <li className="k-tick"></li>
373
- <li className="k-tick"></li>
374
- <li className="k-tick"></li>
375
- <li className="k-tick"></li>
376
- <li className="k-tick k-tick-large">
377
- <span className="k-label">50</span>
378
- </li>
379
- <li className="k-tick"></li>
380
- <li className="k-tick"></li>
381
- <li className="k-tick"></li>
382
- <li className="k-tick"></li>
383
- <li className="k-tick k-tick-large">
384
- <span className="k-label">75</span>
385
- </li>
386
- <li className="k-tick"></li>
387
- <li className="k-tick"></li>
388
- <li className="k-tick"></li>
389
- <li className="k-tick"></li>
390
- <li className="k-tick k-tick-large">
391
- <span className="k-label">100</span>
392
- </li>
393
- </ul>
394
- <div className="k-slider-track">
395
- <div className="k-slider-selection"></div>
396
- <a href="#" className="k-draghandle k-draghandle-start"></a>
397
- <a href="#" className="k-draghandle k-draghandle-end"></a>
398
- </div>
399
- </div>
400
- <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
401
- </div>
215
+ <Slider type="range" orientation="vertical" dir="rtl">
216
+ <SliderTick label large text="0"/>
217
+ <SliderTick />
218
+ <SliderTick />
219
+ <SliderTick />
220
+ <SliderTick />
221
+ <SliderTick label large text="25"/>
222
+ <SliderTick />
223
+ <SliderTick />
224
+ <SliderTick />
225
+ <SliderTick />
226
+ <SliderTick label large text="50"/>
227
+ <SliderTick />
228
+ <SliderTick />
229
+ <SliderTick />
230
+ <SliderTick />
231
+ <SliderTick label large text="75"/>
232
+ <SliderTick />
233
+ <SliderTick />
234
+ <SliderTick />
235
+ <SliderTick />
236
+ <SliderTick label large text="100"/>
237
+ </Slider>
402
238
  </section>
403
239
 
404
240
  </div>