kempo-ui 0.4.0 → 0.4.2
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.
- package/bin/get_icon.js +0 -0
- package/bin/highlight_code.js +0 -0
- package/bin/icon.js +0 -0
- package/bin/list_icons.js +0 -0
- package/dist/components/Slider.js +188 -0
- package/dist/components/Split.js +31 -13
- package/docs/components/accordion.html +4 -0
- package/docs/components/aside.html +4 -0
- package/docs/components/card.html +4 -0
- package/docs/components/code-editor.html +4 -0
- package/docs/components/color-picker.html +4 -0
- package/docs/components/combobox.html +4 -0
- package/docs/components/content-slider.html +4 -0
- package/docs/components/context.html +4 -0
- package/docs/components/dialog.html +4 -0
- package/docs/components/dropdown.html +4 -0
- package/docs/components/filter-list.html +4 -0
- package/docs/components/focus-capture.html +4 -0
- package/docs/components/html-editor.html +4 -0
- package/docs/components/hybrid-component.html +4 -0
- package/docs/components/icon.html +4 -0
- package/docs/components/import.html +4 -0
- package/docs/components/light-component.html +4 -0
- package/docs/components/nav-spacer.html +4 -0
- package/docs/components/nav.html +4 -0
- package/docs/components/photo-viewer.html +4 -0
- package/docs/components/progress.html +4 -0
- package/docs/components/resize.html +4 -0
- package/docs/components/shadow-component.html +4 -0
- package/docs/components/show-more.html +4 -0
- package/docs/components/slider.html +781 -0
- package/docs/components/sortable.html +4 -0
- package/docs/components/spinner.html +4 -0
- package/docs/components/split.html +32 -3
- package/docs/components/table.html +4 -0
- package/docs/components/tableControls.html +4 -0
- package/docs/components/tableCustomFields.html +4 -0
- package/docs/components/tableFetchRecords.html +4 -0
- package/docs/components/tableFieldSortHide.html +4 -0
- package/docs/components/tablePagination.html +4 -0
- package/docs/components/tablePlaceholder.html +4 -0
- package/docs/components/tableRecordEditing.html +4 -0
- package/docs/components/tableRecordFiltering.html +4 -0
- package/docs/components/tableRecordHiding.html +4 -0
- package/docs/components/tableRecordSearching.html +4 -0
- package/docs/components/tableRecordSelection.html +4 -0
- package/docs/components/tableRowControls.html +4 -0
- package/docs/components/tableServerSync.html +4 -0
- package/docs/components/tableSorting.html +4 -0
- package/docs/components/tabs.html +4 -0
- package/docs/components/tags.html +4 -0
- package/docs/components/theme-select.html +4 -0
- package/docs/components/theme-switcher.html +4 -0
- package/docs/components/timestamp.html +4 -0
- package/docs/components/toast.html +4 -0
- package/docs/components/toggle.html +4 -0
- package/docs/components/tree.html +4 -0
- package/docs/index.html +10 -0
- package/docs/src/components/Slider.js +188 -0
- package/docs/src/components/Split.js +31 -13
- package/docs/utils/context.html +4 -0
- package/docs/utils/cookie.html +4 -0
- package/docs/utils/debounce.html +4 -0
- package/docs/utils/drag.html +4 -0
- package/docs/utils/elevation.html +4 -0
- package/docs/utils/formatTimestamp.html +4 -0
- package/docs/utils/object.html +4 -0
- package/docs/utils/propConverters.html +4 -0
- package/docs/utils/string.html +4 -0
- package/docs/utils/theme.html +4 -0
- package/docs/utils/toTitleCase.html +4 -0
- package/docs/utils/type.html +4 -0
- package/docs/utils/wait.html +4 -0
- package/docs-src/components/slider.page.html +331 -0
- package/docs-src/components/split.page.html +28 -3
- package/docs-src/index.page.html +6 -0
- package/docs-src/nav.fragment.html +4 -0
- package/llms.txt +1 -0
- package/package.json +1 -1
- package/src/components/Slider.js +480 -0
- package/src/components/Split.js +163 -132
- package/tests/components/Slider.browser-test.js +823 -0
|
@@ -0,0 +1,781 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Slider - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
|
+
<link rel="manifest" href="../manifest.json" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
|
|
11
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
13
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
+
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
|
|
18
|
+
<k-nav
|
|
19
|
+
fixed
|
|
20
|
+
class="bg-primary"
|
|
21
|
+
>
|
|
22
|
+
<button
|
|
23
|
+
id="toggleNavSideMenu"
|
|
24
|
+
class="link"
|
|
25
|
+
>
|
|
26
|
+
<k-icon name="menu"></k-icon>
|
|
27
|
+
</button>
|
|
28
|
+
<a
|
|
29
|
+
href="../"
|
|
30
|
+
class="d-if ph"
|
|
31
|
+
style="align-items: center"
|
|
32
|
+
>
|
|
33
|
+
<img
|
|
34
|
+
src="../media/icon32.png"
|
|
35
|
+
alt="Kempo UI Icon"
|
|
36
|
+
class="pr"
|
|
37
|
+
/>
|
|
38
|
+
Kempo UI
|
|
39
|
+
</a>
|
|
40
|
+
<div
|
|
41
|
+
style="position:relative;margin:0 .25rem;align-self:center;"
|
|
42
|
+
theme="light"
|
|
43
|
+
>
|
|
44
|
+
<input
|
|
45
|
+
id="navSearchInput"
|
|
46
|
+
type="search"
|
|
47
|
+
placeholder="Search docs..."
|
|
48
|
+
autocomplete="off"
|
|
49
|
+
style="width:11rem;"
|
|
50
|
+
/>
|
|
51
|
+
<div
|
|
52
|
+
id="navSearchDropdown"
|
|
53
|
+
hidden
|
|
54
|
+
theme="light"
|
|
55
|
+
style="position:absolute;top:calc(100% + 4px);left:0;width:min(480px,90vw);max-height:70vh;background:var(--c_bg);border:1px solid var(--c_border);border-radius:var(--radius);overflow:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);"
|
|
56
|
+
>
|
|
57
|
+
<k-filter-list
|
|
58
|
+
id="navSearchList"
|
|
59
|
+
style="display:block;padding:.25rem 0;"
|
|
60
|
+
>
|
|
61
|
+
<k-filter-item filter-keywords="accordion components"><a
|
|
62
|
+
href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
|
|
63
|
+
<k-filter-item filter-keywords="aside sidebar components"><a
|
|
64
|
+
href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
|
|
65
|
+
<k-filter-item filter-keywords="card components"><a
|
|
66
|
+
href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
|
|
67
|
+
<k-filter-item filter-keywords="code editor codeeditor monaco components"><a
|
|
68
|
+
href="../components/code-editor.html"
|
|
69
|
+
>Code Editor<br><small>Component</small></a></k-filter-item>
|
|
70
|
+
<k-filter-item filter-keywords="combobox combo box search autocomplete components"><a
|
|
71
|
+
href="../components/combobox.html"
|
|
72
|
+
>Combobox<br><small>Component</small></a></k-filter-item>
|
|
73
|
+
<k-filter-item filter-keywords="color picker colorpicker components"><a
|
|
74
|
+
href="../components/color-picker.html"
|
|
75
|
+
>Color Picker<br><small>Component</small></a></k-filter-item>
|
|
76
|
+
<k-filter-item filter-keywords="content slider components"><a
|
|
77
|
+
href="../components/content-slider.html"
|
|
78
|
+
>Content Slider<br><small>Component</small></a></k-filter-item>
|
|
79
|
+
<k-filter-item filter-keywords="context state global components"><a
|
|
80
|
+
href="../components/context.html"
|
|
81
|
+
>Context<br><small>Component</small></a></k-filter-item>
|
|
82
|
+
<k-filter-item filter-keywords="dialog modal popup components"><a
|
|
83
|
+
href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
|
|
84
|
+
<k-filter-item filter-keywords="dropdown select components"><a
|
|
85
|
+
href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
|
|
86
|
+
<k-filter-item filter-keywords="filter list filterlist components"><a
|
|
87
|
+
href="../components/filter-list.html"
|
|
88
|
+
>Filter List<br><small>Component</small></a></k-filter-item>
|
|
89
|
+
<k-filter-item filter-keywords="focus capture focuscapture components"><a
|
|
90
|
+
href="../components/focus-capture.html"
|
|
91
|
+
>Focus Capture<br><small>Component</small></a></k-filter-item>
|
|
92
|
+
<k-filter-item filter-keywords="html editor components"><a
|
|
93
|
+
href="../components/html-editor.html">HTML
|
|
94
|
+
Editor<br><small>Component</small></a></k-filter-item>
|
|
95
|
+
<k-filter-item filter-keywords="icon components"><a
|
|
96
|
+
href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
|
|
97
|
+
<k-filter-item filter-keywords="import components"><a
|
|
98
|
+
href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
|
|
99
|
+
<k-filter-item filter-keywords="nav navbar navigation components"><a
|
|
100
|
+
href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
|
|
101
|
+
<k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a
|
|
102
|
+
href="../components/nav-spacer.html"
|
|
103
|
+
>Nav Spacer<br><small>Component</small></a></k-filter-item>
|
|
104
|
+
<k-filter-item filter-keywords="photo viewer photoviewer components"><a
|
|
105
|
+
href="../components/photo-viewer.html"
|
|
106
|
+
>Photo Viewer<br><small>Component</small></a></k-filter-item>
|
|
107
|
+
<k-filter-item filter-keywords="progress loading components"><a
|
|
108
|
+
href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
|
|
109
|
+
<k-filter-item filter-keywords="resize components"><a
|
|
110
|
+
href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
|
|
111
|
+
<k-filter-item filter-keywords="show more showmore components"><a
|
|
112
|
+
href="../components/show-more.html"
|
|
113
|
+
>Show More<br><small>Component</small></a></k-filter-item>
|
|
114
|
+
<k-filter-item filter-keywords="slider range input step components"><a
|
|
115
|
+
href="../components/slider.html"
|
|
116
|
+
>Slider<br><small>Component</small></a></k-filter-item>
|
|
117
|
+
<k-filter-item filter-keywords="sortable drag drop sort components"><a
|
|
118
|
+
href="../components/sortable.html"
|
|
119
|
+
>Sortable<br><small>Component</small></a></k-filter-item>
|
|
120
|
+
<k-filter-item filter-keywords="spinner loading components"><a
|
|
121
|
+
href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
|
|
122
|
+
<k-filter-item filter-keywords="split pane components"><a
|
|
123
|
+
href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
|
|
124
|
+
<k-filter-item filter-keywords="table data grid components"><a
|
|
125
|
+
href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
|
|
126
|
+
<k-filter-item filter-keywords="table controls advanced example"><a
|
|
127
|
+
href="../components/tableControls.html"
|
|
128
|
+
>Table — Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
129
|
+
<k-filter-item filter-keywords="table custom fields advanced example"><a
|
|
130
|
+
href="../components/tableCustomFields.html"
|
|
131
|
+
>Table — Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
|
|
132
|
+
<k-filter-item filter-keywords="table fetch records advanced example"><a
|
|
133
|
+
href="../components/tableFetchRecords.html"
|
|
134
|
+
>Table — Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
|
|
135
|
+
<k-filter-item filter-keywords="table field sort hide advanced example"><a
|
|
136
|
+
href="../components/tableFieldSortHide.html"
|
|
137
|
+
>Table — Field Sort & Hide<br><small>Advanced Example</small></a></k-filter-item>
|
|
138
|
+
<k-filter-item filter-keywords="table pagination advanced example"><a
|
|
139
|
+
href="../components/tablePagination.html"
|
|
140
|
+
>Table — Pagination<br><small>Advanced Example</small></a></k-filter-item>
|
|
141
|
+
<k-filter-item filter-keywords="table record editing advanced example"><a
|
|
142
|
+
href="../components/tableRecordEditing.html"
|
|
143
|
+
>Table — Record Editing<br><small>Advanced Example</small></a></k-filter-item>
|
|
144
|
+
<k-filter-item filter-keywords="table record filtering advanced example"><a
|
|
145
|
+
href="../components/tableRecordFiltering.html"
|
|
146
|
+
>Table — Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
|
|
147
|
+
<k-filter-item filter-keywords="table record hiding advanced example"><a
|
|
148
|
+
href="../components/tableRecordHiding.html"
|
|
149
|
+
>Table — Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
|
|
150
|
+
<k-filter-item filter-keywords="table record searching advanced example"><a
|
|
151
|
+
href="../components/tableRecordSearching.html"
|
|
152
|
+
>Table — Record Searching<br><small>Advanced Example</small></a></k-filter-item>
|
|
153
|
+
<k-filter-item filter-keywords="table record selection advanced example"><a
|
|
154
|
+
href="../components/tableRecordSelection.html"
|
|
155
|
+
>Table — Record Selection<br><small>Advanced Example</small></a></k-filter-item>
|
|
156
|
+
<k-filter-item filter-keywords="table row controls advanced example"><a
|
|
157
|
+
href="../components/tableRowControls.html"
|
|
158
|
+
>Table — Row Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
159
|
+
<k-filter-item filter-keywords="table server sync advanced example"><a
|
|
160
|
+
href="../components/tableServerSync.html"
|
|
161
|
+
>Table — Server Sync<br><small>Advanced Example</small></a></k-filter-item>
|
|
162
|
+
<k-filter-item filter-keywords="table sorting advanced example"><a
|
|
163
|
+
href="../components/tableSorting.html"
|
|
164
|
+
>Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
|
|
165
|
+
<k-filter-item filter-keywords="table placeholder advanced example"><a
|
|
166
|
+
href="../components/tablePlaceholder.html"
|
|
167
|
+
>Table — Placeholder<br><small>Advanced Example</small></a></k-filter-item>
|
|
168
|
+
<k-filter-item filter-keywords="tabs tab panel components"><a
|
|
169
|
+
href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
|
|
170
|
+
<k-filter-item filter-keywords="tags tag input components"><a
|
|
171
|
+
href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
|
|
172
|
+
<k-filter-item filter-keywords="theme select dropdown dark light components"><a
|
|
173
|
+
href="../components/theme-select.html"
|
|
174
|
+
>Theme Select<br><small>Component</small></a></k-filter-item>
|
|
175
|
+
<k-filter-item filter-keywords="theme switcher dark light components"><a
|
|
176
|
+
href="../components/theme-switcher.html"
|
|
177
|
+
>Theme Switcher<br><small>Component</small></a></k-filter-item>
|
|
178
|
+
<k-filter-item filter-keywords="timestamp date time components"><a
|
|
179
|
+
href="../components/timestamp.html"
|
|
180
|
+
>Timestamp<br><small>Component</small></a></k-filter-item>
|
|
181
|
+
<k-filter-item filter-keywords="toast notification alert components"><a
|
|
182
|
+
href="../components/toast.html"
|
|
183
|
+
>Toast<br><small>Component</small></a></k-filter-item>
|
|
184
|
+
<k-filter-item filter-keywords="toggle switch checkbox components"><a
|
|
185
|
+
href="../components/toggle.html"
|
|
186
|
+
>Toggle<br><small>Component</small></a></k-filter-item>
|
|
187
|
+
<k-filter-item filter-keywords="tree treeview components"><a
|
|
188
|
+
href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
|
|
189
|
+
<k-filter-item filter-keywords="shadow component base"><a
|
|
190
|
+
href="../components/shadow-component.html"
|
|
191
|
+
>Shadow Component<br><small>Base Component</small></a></k-filter-item>
|
|
192
|
+
<k-filter-item filter-keywords="light component base"><a
|
|
193
|
+
href="../components/light-component.html">Light Component<br><small>Base
|
|
194
|
+
Component</small></a></k-filter-item>
|
|
195
|
+
<k-filter-item filter-keywords="hybrid component base"><a
|
|
196
|
+
href="../components/hybrid-component.html"
|
|
197
|
+
>Hybrid Component<br><small>Base Component</small></a></k-filter-item>
|
|
198
|
+
<k-filter-item filter-keywords="cookie utils utility"><a
|
|
199
|
+
href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
|
|
200
|
+
<k-filter-item filter-keywords="context utils utility"><a
|
|
201
|
+
href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
|
|
202
|
+
<k-filter-item filter-keywords="debounce utils utility"><a
|
|
203
|
+
href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
|
|
204
|
+
<k-filter-item filter-keywords="drag utils utility"><a
|
|
205
|
+
href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
|
|
206
|
+
<k-filter-item filter-keywords="elevation z-index stacking utils"><a
|
|
207
|
+
href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
|
|
208
|
+
<k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a
|
|
209
|
+
href="../utils/formatTimestamp.html"
|
|
210
|
+
>formatTimestamp<br><small>Utility</small></a></k-filter-item>
|
|
211
|
+
<k-filter-item filter-keywords="object utils utility"><a
|
|
212
|
+
href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
|
|
213
|
+
<k-filter-item filter-keywords="propconverters prop converters utils utility"><a
|
|
214
|
+
href="../utils/propConverters.html"
|
|
215
|
+
>propConverters<br><small>Utility</small></a></k-filter-item>
|
|
216
|
+
<k-filter-item filter-keywords="string utils utility"><a
|
|
217
|
+
href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
|
|
218
|
+
<k-filter-item filter-keywords="theme utils utility"><a
|
|
219
|
+
href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
|
|
220
|
+
<k-filter-item filter-keywords="type utils utility"><a
|
|
221
|
+
href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
|
|
222
|
+
<k-filter-item filter-keywords="wait async utils utility"><a
|
|
223
|
+
href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
|
|
224
|
+
</k-filter-list>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="flex"></div>
|
|
228
|
+
<a
|
|
229
|
+
href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
|
|
230
|
+
target="_blank"
|
|
231
|
+
><k-icon name="license"></k-icon></a>
|
|
232
|
+
<a
|
|
233
|
+
href="https://www.npmjs.com/package/kempo-ui"
|
|
234
|
+
target="_blank"
|
|
235
|
+
><k-icon name="npm"></k-icon></a>
|
|
236
|
+
<a
|
|
237
|
+
href="https://github.com/dustinpoissant/kempo-ui"
|
|
238
|
+
target="_blank"
|
|
239
|
+
><k-icon name="github-mark"></k-icon></a>
|
|
240
|
+
<k-theme-switcher
|
|
241
|
+
class="mr"
|
|
242
|
+
style="
|
|
243
|
+
--padding: 0.5rem;
|
|
244
|
+
--c_active: var(--tc_on_primary);
|
|
245
|
+
--tc_active: var(--c_primary);
|
|
246
|
+
--c_inactive__hover: rgba(255, 255, 255, 0.1);
|
|
247
|
+
"
|
|
248
|
+
></k-theme-switcher>
|
|
249
|
+
</k-nav>
|
|
250
|
+
<div style="width: 100%; height: 4rem;"></div>
|
|
251
|
+
<k-aside
|
|
252
|
+
id="navSideMenu"
|
|
253
|
+
main="overlay"
|
|
254
|
+
state="offscreen"
|
|
255
|
+
>
|
|
256
|
+
<menu>
|
|
257
|
+
<a
|
|
258
|
+
href="../"
|
|
259
|
+
class="ta-center bb mb r0"
|
|
260
|
+
>
|
|
261
|
+
<h1 class="tc-primary">Kempo UI</h1>
|
|
262
|
+
<img
|
|
263
|
+
src="../media/icon128.png"
|
|
264
|
+
alt="Kempo UI Icon"
|
|
265
|
+
/>
|
|
266
|
+
</a>
|
|
267
|
+
|
|
268
|
+
<div class="pl mb">
|
|
269
|
+
<h3>Components</h3>
|
|
270
|
+
<a href="../components/accordion.html">Accordion</a>
|
|
271
|
+
<a href="../components/aside.html">Aside</a>
|
|
272
|
+
<a href="../components/card.html">Card</a>
|
|
273
|
+
<a href="../components/code-editor.html">Code Editor</a>
|
|
274
|
+
<a href="../components/combobox.html">Combobox</a>
|
|
275
|
+
<a href="../components/color-picker.html">ColorPicker</a>
|
|
276
|
+
<a href="../components/content-slider.html">Content Slider</a>
|
|
277
|
+
<a href="../components/context.html">Context</a>
|
|
278
|
+
<a href="../components/dialog.html">Dialog</a>
|
|
279
|
+
<a href="../components/dropdown.html">Dropdown</a>
|
|
280
|
+
<a href="../components/filter-list.html">Filter List</a>
|
|
281
|
+
<a href="../components/focus-capture.html">FocusCapture</a>
|
|
282
|
+
<a href="../components/html-editor.html">HTML Editor</a>
|
|
283
|
+
<a href="../components/icon.html">Icon</a>
|
|
284
|
+
<a href="../components/import.html">Import</a>
|
|
285
|
+
<a href="../components/nav.html">Nav</a>
|
|
286
|
+
<a href="../components/nav-spacer.html">Nav Spacer</a>
|
|
287
|
+
<a href="../components/photo-viewer.html">Photo Viewer</a>
|
|
288
|
+
<a href="../components/progress.html">Progress</a>
|
|
289
|
+
<a href="../components/resize.html">Resize</a>
|
|
290
|
+
<a href="../components/show-more.html">Show More</a>
|
|
291
|
+
<a href="../components/slider.html">Slider</a>
|
|
292
|
+
<a href="../components/sortable.html">Sortable</a>
|
|
293
|
+
<a href="../components/spinner.html">Spinner</a>
|
|
294
|
+
<a href="../components/split.html">Split</a>
|
|
295
|
+
<a href="../components/table.html">Table</a>
|
|
296
|
+
<a href="../components/tabs.html">Tabs</a>
|
|
297
|
+
<a href="../components/tags.html">Tags</a>
|
|
298
|
+
<a href="../components/theme-select.html">Theme Select</a>
|
|
299
|
+
<a href="../components/theme-switcher.html">Theme Switcher</a>
|
|
300
|
+
<a href="../components/timestamp.html">Timestamp</a>
|
|
301
|
+
<a href="../components/toast.html">Toast</a>
|
|
302
|
+
<a href="../components/toggle.html">Toggle</a>
|
|
303
|
+
<a href="../components/tree.html">Tree</a>
|
|
304
|
+
</div>
|
|
305
|
+
|
|
306
|
+
<h5 class="mb0">Base Components</h5>
|
|
307
|
+
<div class="pl mb">
|
|
308
|
+
<a href="../components/shadow-component.html">Shadow Component</a>
|
|
309
|
+
<a href="../components/light-component.html">Light Component</a>
|
|
310
|
+
<a href="../components/hybrid-component.html">Hybrid Component</a>
|
|
311
|
+
</div>
|
|
312
|
+
|
|
313
|
+
<h5 class="mb0">Utils</h5>
|
|
314
|
+
<div class="pl mb">
|
|
315
|
+
<a href="../utils/cookie.html">cookie</a>
|
|
316
|
+
<a href="../utils/context.html">context</a>
|
|
317
|
+
<a href="../utils/debounce.html">debounce</a>
|
|
318
|
+
<a href="../utils/drag.html">drag</a>
|
|
319
|
+
<a href="../utils/elevation.html">elevation</a>
|
|
320
|
+
<a href="../utils/formatTimestamp.html">formatTimestamp</a>
|
|
321
|
+
<a href="../utils/object.html">object</a>
|
|
322
|
+
<a href="../utils/propConverters.html">propConverters</a>
|
|
323
|
+
<a href="../utils/string.html">string</a>
|
|
324
|
+
<a href="../utils/theme.html">theme</a>
|
|
325
|
+
<a href="../utils/type.html">type</a>
|
|
326
|
+
<a href="../utils/wait.html">wait</a>
|
|
327
|
+
</div>
|
|
328
|
+
</menu>
|
|
329
|
+
</k-aside>
|
|
330
|
+
<style>
|
|
331
|
+
#navSearchList a {
|
|
332
|
+
display: block;
|
|
333
|
+
padding: .25rem .5rem;
|
|
334
|
+
border-radius: var(--radius);
|
|
335
|
+
text-decoration: none;
|
|
336
|
+
color: var(--tc);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
#navSearchList a:hover {
|
|
340
|
+
background: rgba(128, 128, 128, .15);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
#navSearchList a small {
|
|
344
|
+
display: block;
|
|
345
|
+
color: var(--tc_muted);
|
|
346
|
+
}
|
|
347
|
+
</style>
|
|
348
|
+
<script
|
|
349
|
+
src="../src/components/Nav.js"
|
|
350
|
+
type="module"
|
|
351
|
+
></script>
|
|
352
|
+
<script
|
|
353
|
+
src="../src/components/FilterList.js"
|
|
354
|
+
type="module"
|
|
355
|
+
></script>
|
|
356
|
+
<script
|
|
357
|
+
src="../src/components/FilterItem.js"
|
|
358
|
+
type="module"
|
|
359
|
+
></script>
|
|
360
|
+
<script
|
|
361
|
+
src="../src/components/Aside.js"
|
|
362
|
+
type="module"
|
|
363
|
+
></script>
|
|
364
|
+
<script
|
|
365
|
+
src="../src/components/Icon.js"
|
|
366
|
+
type="module"
|
|
367
|
+
></script>
|
|
368
|
+
<script
|
|
369
|
+
src="../src/components/ThemeSwitcher.js"
|
|
370
|
+
type="module"
|
|
371
|
+
></script>
|
|
372
|
+
<script type="module">
|
|
373
|
+
import debounce from '../src/utils/debounce.js';
|
|
374
|
+
|
|
375
|
+
document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
|
|
376
|
+
await window.customElements.whenDefined('k-aside');
|
|
377
|
+
document.getElementById('navSideMenu').toggle();
|
|
378
|
+
});
|
|
379
|
+
|
|
380
|
+
document.addEventListener('click', function (e) {
|
|
381
|
+
if (e.target.matches('a[href^="#"]')) {
|
|
382
|
+
e.preventDefault();
|
|
383
|
+
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
384
|
+
const target = document.getElementById(targetId);
|
|
385
|
+
if (target) {
|
|
386
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
387
|
+
const url = window.location.pathname + window.location.search + '#' + targetId;
|
|
388
|
+
history.replaceState(null, '', url);
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
});
|
|
392
|
+
|
|
393
|
+
/*
|
|
394
|
+
Nav Search
|
|
395
|
+
*/
|
|
396
|
+
const searchInput = document.getElementById('navSearchInput');
|
|
397
|
+
const searchDropdown = document.getElementById('navSearchDropdown');
|
|
398
|
+
let navSearchList = null;
|
|
399
|
+
|
|
400
|
+
const openSearch = async () => {
|
|
401
|
+
await customElements.whenDefined('k-filter-list');
|
|
402
|
+
if (!navSearchList) navSearchList = document.getElementById('navSearchList');
|
|
403
|
+
navSearchList.filter(searchInput.value);
|
|
404
|
+
searchDropdown.hidden = false;
|
|
405
|
+
};
|
|
406
|
+
|
|
407
|
+
const closeSearch = () => {
|
|
408
|
+
searchDropdown.hidden = true;
|
|
409
|
+
navSearchList?.clearFocus();
|
|
410
|
+
};
|
|
411
|
+
|
|
412
|
+
searchInput.addEventListener('focus', openSearch);
|
|
413
|
+
|
|
414
|
+
searchInput.addEventListener('input', debounce(e => {
|
|
415
|
+
navSearchList?.filter(e.target.value);
|
|
416
|
+
}, 150));
|
|
417
|
+
|
|
418
|
+
searchInput.addEventListener('keydown', e => {
|
|
419
|
+
if (e.key === 'Escape') {
|
|
420
|
+
searchInput.value = '';
|
|
421
|
+
searchInput.blur();
|
|
422
|
+
closeSearch();
|
|
423
|
+
} else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
|
|
424
|
+
navSearchList?.handleKeydown(e);
|
|
425
|
+
}
|
|
426
|
+
});
|
|
427
|
+
|
|
428
|
+
searchInput.addEventListener('blur', () => {
|
|
429
|
+
setTimeout(closeSearch, 150);
|
|
430
|
+
});
|
|
431
|
+
|
|
432
|
+
document.addEventListener('keydown', e => {
|
|
433
|
+
let active = document.activeElement;
|
|
434
|
+
while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
|
|
435
|
+
const tag = active?.tagName;
|
|
436
|
+
if (tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
|
|
437
|
+
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
|
438
|
+
if (e.key.length === 1) {
|
|
439
|
+
searchInput.focus();
|
|
440
|
+
}
|
|
441
|
+
});
|
|
442
|
+
</script>
|
|
443
|
+
|
|
444
|
+
|
|
445
|
+
<h1 class="ta-center">Slider</h1>
|
|
446
|
+
|
|
447
|
+
<k-main>
|
|
448
|
+
|
|
449
|
+
<k-accordion persistent-id="toc" class="b r mb">
|
|
450
|
+
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
451
|
+
<k-accordion-panel name="toc-panel">
|
|
452
|
+
<div class="m pl">
|
|
453
|
+
<h6>Examples</h6>
|
|
454
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
455
|
+
<a href="#withSteps">With Steps</a><br />
|
|
456
|
+
<a href="#rangeSlider">Range Slider</a><br />
|
|
457
|
+
<a href="#vertical">Vertical</a><br />
|
|
458
|
+
<a href="#verticalRange">Vertical Range</a><br />
|
|
459
|
+
<a href="#customStyles">Custom Styles</a><br />
|
|
460
|
+
<a href="#formatTooltip">Format Tooltip</a><br />
|
|
461
|
+
<a href="#javascriptUsage">JavaScript Usage</a><br />
|
|
462
|
+
<a href="#formUsage">Form Usage</a><br />
|
|
463
|
+
<a href="#disabled">Disabled</a><br />
|
|
464
|
+
|
|
465
|
+
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
466
|
+
<a href="#constructor">Constructor</a><br />
|
|
467
|
+
<a href="#requirements">Requirements</a><br />
|
|
468
|
+
<a href="#properties">Properties</a><br />
|
|
469
|
+
<a href="#methods">Methods</a><br />
|
|
470
|
+
<a href="#cssVariables">CSS Variables</a><br />
|
|
471
|
+
<a href="#events">Events</a><br />
|
|
472
|
+
</div>
|
|
473
|
+
</k-accordion-panel>
|
|
474
|
+
</k-accordion>
|
|
475
|
+
|
|
476
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
477
|
+
<p>A continuous slider from 0 to 100.</p>
|
|
478
|
+
<div class="row -mx">
|
|
479
|
+
<div class="col m-span-12 px">
|
|
480
|
+
<k-card label="HTML">
|
|
481
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"25"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span></code></pre>
|
|
482
|
+
</k-card>
|
|
483
|
+
</div>
|
|
484
|
+
<div class="col m-span-12 px">
|
|
485
|
+
<k-card label="Output">
|
|
486
|
+
<k-slider value="25" class="my"></k-slider>
|
|
487
|
+
</k-card>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
|
|
491
|
+
<h3 id="withSteps"><a href="#withSteps" class="no-link">With Steps</a></h3>
|
|
492
|
+
<p>Use the <code>steps</code> attribute to define specific snap points. The slider will only stop on those values.</p>
|
|
493
|
+
<div class="row -mx">
|
|
494
|
+
<div class="col m-span-12 px">
|
|
495
|
+
<k-card label="HTML">
|
|
496
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">steps</span>=<span class="hljs-string">"0,25,50,75,100"</span>></span>Volume<span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span></code></pre>
|
|
497
|
+
</k-card>
|
|
498
|
+
</div>
|
|
499
|
+
<div class="col m-span-12 px">
|
|
500
|
+
<k-card label="Output">
|
|
501
|
+
<k-slider min="0" max="100" value="50" steps="0,25,50,75,100" class="my">Volume</k-slider>
|
|
502
|
+
</k-card>
|
|
503
|
+
</div>
|
|
504
|
+
</div>
|
|
505
|
+
|
|
506
|
+
<h3 id="rangeSlider"><a href="#rangeSlider" class="no-link">Range Slider</a></h3>
|
|
507
|
+
<p>Pass two comma-separated numbers as the <code>value</code> to create a range slider with two handles. The first number is the lower bound and the second is the upper bound. The handles cannot cross each other.</p>
|
|
508
|
+
<div class="row -mx">
|
|
509
|
+
<div class="col m-span-12 px">
|
|
510
|
+
<k-card label="HTML">
|
|
511
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20,80"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span></code></pre>
|
|
512
|
+
</k-card>
|
|
513
|
+
</div>
|
|
514
|
+
<div class="col m-span-12 px">
|
|
515
|
+
<k-card label="Output">
|
|
516
|
+
<k-slider value="20,80" class="my"></k-slider>
|
|
517
|
+
</k-card>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
|
|
521
|
+
<h4>Range with Steps</h4>
|
|
522
|
+
<div class="row -mx">
|
|
523
|
+
<div class="col m-span-12 px">
|
|
524
|
+
<k-card label="HTML">
|
|
525
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"25,75"</span> <span class="hljs-attr">steps</span>=<span class="hljs-string">"0,25,50,75,100"</span>></span>Price Range<span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span></code></pre>
|
|
526
|
+
</k-card>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="col m-span-12 px">
|
|
529
|
+
<k-card label="Output">
|
|
530
|
+
<k-slider value="25,75" steps="0,25,50,75,100" class="my">Price Range</k-slider>
|
|
531
|
+
</k-card>
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
|
|
535
|
+
<h3 id="vertical"><a href="#vertical" class="no-link">Vertical</a></h3>
|
|
536
|
+
<p>Add the <code>vertical</code> attribute to render the slider vertically. Set a height on the element or its container.</p>
|
|
537
|
+
<div class="row -mx">
|
|
538
|
+
<div class="col m-span-12 px">
|
|
539
|
+
<k-card label="HTML">
|
|
540
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">vertical</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"40"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span></code></pre>
|
|
541
|
+
</k-card>
|
|
542
|
+
</div>
|
|
543
|
+
<div class="col m-span-12 px">
|
|
544
|
+
<k-card label="Output">
|
|
545
|
+
<k-slider vertical value="40"></k-slider>
|
|
546
|
+
</k-card>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
|
|
550
|
+
<h3 id="verticalRange"><a href="#verticalRange" class="no-link">Vertical Range</a></h3>
|
|
551
|
+
<p>Combine <code>vertical</code> with a comma-separated <code>value</code> for a vertical range slider.</p>
|
|
552
|
+
<div class="row -mx">
|
|
553
|
+
<div class="col m-span-12 px">
|
|
554
|
+
<k-card label="HTML">
|
|
555
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">vertical</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20,80"</span> <span class="hljs-attr">steps</span>=<span class="hljs-string">"0,20,40,60,80,100"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span></code></pre>
|
|
556
|
+
</k-card>
|
|
557
|
+
</div>
|
|
558
|
+
<div class="col m-span-12 px">
|
|
559
|
+
<k-card label="Output">
|
|
560
|
+
<k-slider vertical value="20,80"></k-slider>
|
|
561
|
+
</k-card>
|
|
562
|
+
</div>
|
|
563
|
+
</div>
|
|
564
|
+
|
|
565
|
+
<h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
|
|
566
|
+
<div class="row -mx">
|
|
567
|
+
<div class="col m-span-12 px">
|
|
568
|
+
<k-card label="HTML">
|
|
569
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"<br> --track_height: 10px;<br> --fill_background: var(--c_success);<br> --thumb_size: 28px;<br> --thumb_background: var(--c_success);<br> --step_dot_size: 12px;<br> "</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span></code></pre>
|
|
570
|
+
</k-card>
|
|
571
|
+
</div>
|
|
572
|
+
<div class="col m-span-12 px">
|
|
573
|
+
<k-card label="Output">
|
|
574
|
+
<k-slider
|
|
575
|
+
value="50"
|
|
576
|
+
style="
|
|
577
|
+
--track_height: 10px;
|
|
578
|
+
--fill_background: var(--c_success);
|
|
579
|
+
--thumb_size: 28px;
|
|
580
|
+
--thumb_background: var(--c_success);
|
|
581
|
+
--step_dot_size: 12px;
|
|
582
|
+
"
|
|
583
|
+
></k-slider>
|
|
584
|
+
</k-card>
|
|
585
|
+
</div>
|
|
586
|
+
</div>
|
|
587
|
+
|
|
588
|
+
<h3 id="formatTooltip"><a href="#formatTooltip" class="no-link">Format Tooltip</a></h3>
|
|
589
|
+
<p>Add the <code>tooltip</code> attribute to show a value tooltip above the handle while dragging. Use the <code>format</code> attribute to control how the value is displayed in the tooltip, change event, and form submission. The pattern <code>0.00</code> in the format string is replaced with the numeric value at the matching decimal precision.</p>
|
|
590
|
+
<div class="row -mx">
|
|
591
|
+
<div class="col m-span-12 px">
|
|
592
|
+
<k-card label="HTML">
|
|
593
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"$0.00"</span> <span class="hljs-attr">tooltip</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span></code></pre>
|
|
594
|
+
</k-card>
|
|
595
|
+
</div>
|
|
596
|
+
<div class="col m-span-12 px">
|
|
597
|
+
<k-card label="Output">
|
|
598
|
+
<k-slider value="25" min="0" max="100" format="$0.00" tooltip class="my"></k-slider>
|
|
599
|
+
</k-card>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
<h3 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h3>
|
|
604
|
+
<h4>Single Value</h4>
|
|
605
|
+
<div class="row -mx">
|
|
606
|
+
<div class="col m-span-12 px">
|
|
607
|
+
<k-card label="HTML">
|
|
608
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jsSlider"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">tooltip</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span><br><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Value: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sliderVal"</span>></span>0<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><br> <span class="hljs-keyword">const</span> $jsSlider = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'jsSlider'</span>);<br> <span class="hljs-keyword">const</span> $sliderVal = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'sliderVal'</span>);<br> $jsSlider.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {<br> $sliderVal.<span class="hljs-property">textContent</span> = e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>;<br> });<br></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
609
|
+
</k-card>
|
|
610
|
+
</div>
|
|
611
|
+
<div class="col m-span-12 px">
|
|
612
|
+
<k-card label="Output">
|
|
613
|
+
<k-slider id="jsSlider" value="0" format="0" tooltip class="my"></k-slider>
|
|
614
|
+
<p>Value: <span id="sliderVal">0</span></p>
|
|
615
|
+
<script>
|
|
616
|
+
const $jsSlider = document.getElementById('jsSlider');
|
|
617
|
+
const $sliderVal = document.getElementById('sliderVal');
|
|
618
|
+
$jsSlider.addEventListener('change', (e) => {
|
|
619
|
+
$sliderVal.textContent = e.detail.value;
|
|
620
|
+
});
|
|
621
|
+
</script>
|
|
622
|
+
</k-card>
|
|
623
|
+
</div>
|
|
624
|
+
</div>
|
|
625
|
+
|
|
626
|
+
<h4>Range</h4>
|
|
627
|
+
<div class="row -mx">
|
|
628
|
+
<div class="col m-span-12 px">
|
|
629
|
+
<k-card label="HTML">
|
|
630
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jsRangeSlider"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"10,90"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">tooltip</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span><br><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Range: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rangeDisplay"</span>></span>10 - 90<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><br> <span class="hljs-keyword">const</span> $rs = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'jsRangeSlider'</span>);<br> <span class="hljs-keyword">const</span> $rd = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'rangeDisplay'</span>);<br> $rs.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {<br> <span class="hljs-keyword">const</span> [lo, hi] = e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>.<span class="hljs-title function_">split</span>(<span class="hljs-string">','</span>);<br> $rd.<span class="hljs-property">textContent</span> = lo + <span class="hljs-string">' - '</span> + hi;<br> });<br></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
631
|
+
</k-card>
|
|
632
|
+
</div>
|
|
633
|
+
<div class="col m-span-12 px">
|
|
634
|
+
<k-card label="Output">
|
|
635
|
+
<k-slider id="jsRangeSlider" class="my" value="10,90" format="0" tooltip></k-slider>
|
|
636
|
+
<p>Range: <span id="rangeDisplay">10 - 90</span></p>
|
|
637
|
+
<script>
|
|
638
|
+
const $rs = document.getElementById('jsRangeSlider');
|
|
639
|
+
const $rd = document.getElementById('rangeDisplay');
|
|
640
|
+
$rs.addEventListener('change', (e) => {
|
|
641
|
+
const [lo, hi] = e.detail.value.split(',');
|
|
642
|
+
$rd.textContent = lo + ' - ' + hi;
|
|
643
|
+
});
|
|
644
|
+
</script>
|
|
645
|
+
</k-card>
|
|
646
|
+
</div>
|
|
647
|
+
</div>
|
|
648
|
+
|
|
649
|
+
<h3 id="formUsage"><a href="#formUsage" class="no-link">Form Usage</a></h3>
|
|
650
|
+
<p>The slider is form-associated. Set a <code>name</code> attribute so it participates in form submission. When a <code>format</code> is set, the submitted value is the formatted string.</p>
|
|
651
|
+
<div class="row -mx">
|
|
652
|
+
<div class="col m-span-12 px">
|
|
653
|
+
<k-card label="HTML">
|
|
654
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sliderForm"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"volume"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"75"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"0%"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"priceRange"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20,80"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"$0"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"></<span class="hljs-name">form</span>></span><br><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Form Data: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"formOutput"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><br> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'sliderForm'</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'submit'</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {<br> e.<span class="hljs-title function_">preventDefault</span>();<br> <span class="hljs-keyword">const</span> fd = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FormData</span>(e.<span class="hljs-property">target</span>);<br> <span class="hljs-keyword">const</span> entries = [...fd.<span class="hljs-title function_">entries</span>()].<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">[k, v]</span>) =></span> k + <span class="hljs-string">'='</span> + v);<br> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'formOutput'</span>).<span class="hljs-property">textContent</span> = entries.<span class="hljs-title function_">join</span>(<span class="hljs-string">', '</span>);<br> });<br></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
655
|
+
</k-card>
|
|
656
|
+
</div>
|
|
657
|
+
<div class="col m-span-12 px">
|
|
658
|
+
<k-card label="Output">
|
|
659
|
+
<form id="sliderForm">
|
|
660
|
+
<k-slider name="volume" value="75" format="0%" class="my"></k-slider>
|
|
661
|
+
<k-slider name="priceRange" value="20,80" format="$0" class="my"></k-slider>
|
|
662
|
+
<button type="submit">Submit</button>
|
|
663
|
+
</form>
|
|
664
|
+
<p>Form Data: <span id="formOutput"></span></p>
|
|
665
|
+
<script>
|
|
666
|
+
document.getElementById('sliderForm').addEventListener('submit', (e) => {
|
|
667
|
+
e.preventDefault();
|
|
668
|
+
const fd = new FormData(e.target);
|
|
669
|
+
const entries = [...fd.entries()].map(([k, v]) => k + '=' + v);
|
|
670
|
+
document.getElementById('formOutput').textContent = entries.join(', ');
|
|
671
|
+
});
|
|
672
|
+
</script>
|
|
673
|
+
</k-card>
|
|
674
|
+
</div>
|
|
675
|
+
</div>
|
|
676
|
+
|
|
677
|
+
<h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
|
|
678
|
+
<p>The <code>disabled</code> attribute prevents user interaction while displaying the current value.</p>
|
|
679
|
+
<div class="row -mx">
|
|
680
|
+
<div class="col m-span-12 px">
|
|
681
|
+
<k-card label="HTML">
|
|
682
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-slider</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"40"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-slider</span>></span></code></pre>
|
|
683
|
+
</k-card>
|
|
684
|
+
</div>
|
|
685
|
+
<div class="col m-span-12 px">
|
|
686
|
+
<k-card label="Output">
|
|
687
|
+
<k-slider disabled class="my" value="40"></k-slider>
|
|
688
|
+
</k-card>
|
|
689
|
+
</div>
|
|
690
|
+
</div>
|
|
691
|
+
|
|
692
|
+
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
693
|
+
|
|
694
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
695
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
696
|
+
<h5><code>new Slider()</code></h5>
|
|
697
|
+
|
|
698
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
699
|
+
<ul>
|
|
700
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
701
|
+
</ul>
|
|
702
|
+
|
|
703
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
704
|
+
<h5><code>value<i>: String</i></code></h5>
|
|
705
|
+
<p>The current value. A single number (e.g. <code>"50"</code>) for a standard slider, or two comma-separated numbers (e.g. <code>"20,80"</code>) for a range slider. Default is <code>"0"</code>. Syncs to <code>value</code> attribute.</p>
|
|
706
|
+
|
|
707
|
+
<h5><code>name<i>: String</i></code></h5>
|
|
708
|
+
<p>The form field name. When set inside a <code><form></code>, the slider participates in form submission. Syncs to <code>name</code> attribute.</p>
|
|
709
|
+
|
|
710
|
+
<h5><code>min<i>: Number</i></code></h5>
|
|
711
|
+
<p>The minimum value of the slider range. Default is <code>0</code>. Syncs to <code>min</code> attribute.</p>
|
|
712
|
+
|
|
713
|
+
<h5><code>max<i>: Number</i></code></h5>
|
|
714
|
+
<p>The maximum value of the slider range. Default is <code>100</code>. Syncs to <code>max</code> attribute.</p>
|
|
715
|
+
|
|
716
|
+
<h5><code>steps<i>: String</i></code></h5>
|
|
717
|
+
<p>A comma-separated list of specific values the slider can snap to (e.g. <code>"0,25,50,75,100"</code>). When set, the slider only stops on these values. When not set, the slider is continuous. Syncs to <code>steps</code> attribute.</p>
|
|
718
|
+
|
|
719
|
+
<h5><code>format<i>: String</i></code></h5>
|
|
720
|
+
<p>A pattern string for formatting the slider value. Applied to the tooltip display, the <code>change</code> event <code>detail.value</code>, and the form submission value. Use <code>0</code>s as digit placeholders — the number of <code>0</code>s after the decimal separator controls precision. For example <code>"$0.00"</code> formats <code>25</code> as <code>"$25.00"</code>. Default is <code>null</code> (raw number). Syncs to <code>format</code> attribute.</p>
|
|
721
|
+
|
|
722
|
+
<h5><code>tooltip<i>: Boolean</i></code></h5>
|
|
723
|
+
<p>When <code>true</code>, a tooltip showing the current value appears above the thumb handle during drag. Default is <code>false</code>. Syncs to <code>tooltip</code> attribute.</p>
|
|
724
|
+
|
|
725
|
+
<h5><code>vertical<i>: Boolean</i></code></h5>
|
|
726
|
+
<p>When <code>true</code>, the slider renders vertically. Set a height on the element to control the track length. Default is <code>false</code>. Syncs to <code>vertical</code> attribute.</p>
|
|
727
|
+
|
|
728
|
+
<h5><code>disabled<i>: Boolean</i></code></h5>
|
|
729
|
+
<p>When <code>true</code>, the slider cannot be changed by user interaction. The element appears at 50% opacity. Syncs to <code>disabled</code> attribute.</p>
|
|
730
|
+
|
|
731
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
732
|
+
<h5><code>setValue(newValue)<i>: void</i></code></h5>
|
|
733
|
+
<p>Sets the lower value, clamped to min/max and snapped to the nearest step. In range mode, it cannot exceed the upper value.</p>
|
|
734
|
+
|
|
735
|
+
<h5><code>setUpper(newValue)<i>: void</i></code></h5>
|
|
736
|
+
<p>Sets the upper value (range mode only), clamped to min/max and snapped to the nearest step. Cannot go below the lower value.</p>
|
|
737
|
+
|
|
738
|
+
<h5><code>isRange<i>: Boolean</i></code> (getter)</h5>
|
|
739
|
+
<p>Returns <code>true</code> when the <code>value</code> contains a comma (i.e. two handles are active).</p>
|
|
740
|
+
|
|
741
|
+
<h5><code>formattedValue<i>: String</i></code> (getter)</h5>
|
|
742
|
+
<p>Returns the value formatted with the <code>format</code> pattern. For range sliders, both halves are formatted (e.g. <code>"$20.00,$80.00"</code>). Returns the raw <code>value</code> when no format is set.</p>
|
|
743
|
+
|
|
744
|
+
<h5><code>lower<i>: Number</i></code> (getter)</h5>
|
|
745
|
+
<p>The numeric lower bound parsed from <code>value</code>.</p>
|
|
746
|
+
|
|
747
|
+
<h5><code>upper<i>: Number</i></code> (getter)</h5>
|
|
748
|
+
<p>The numeric upper bound parsed from <code>value</code>. Equals <code>max</code> when not in range mode.</p>
|
|
749
|
+
|
|
750
|
+
<h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
|
|
751
|
+
<table class="b">
|
|
752
|
+
<thead><tr><th>Variable</th><th>Default</th><th>Description</th></tr></thead>
|
|
753
|
+
<tbody>
|
|
754
|
+
<tr><td><code>--track_height</code></td><td><code>6px</code></td><td>Thickness of the track (height when horizontal, width when vertical)</td></tr>
|
|
755
|
+
<tr><td><code>--track_background</code></td><td><code>var(--c_border)</code></td><td>Background color of the track</td></tr>
|
|
756
|
+
<tr><td><code>--track_radius</code></td><td><code>99999px</code></td><td>Border radius of the track</td></tr>
|
|
757
|
+
<tr><td><code>--fill_background</code></td><td><code>var(--c_primary)</code></td><td>Color of the filled portion</td></tr>
|
|
758
|
+
<tr><td><code>--thumb_size</code></td><td><code>20px</code></td><td>Diameter of the thumb handle(s)</td></tr>
|
|
759
|
+
<tr><td><code>--thumb_background</code></td><td><code>var(--c_primary)</code></td><td>Background color of the thumb(s)</td></tr>
|
|
760
|
+
<tr><td><code>--thumb_border</code></td><td><code>2px solid white</code></td><td>Border of the thumb(s)</td></tr>
|
|
761
|
+
<tr><td><code>--thumb_shadow</code></td><td><code>0 1px 3px rgba(0,0,0,.3)</code></td><td>Box shadow of the thumb(s)</td></tr>
|
|
762
|
+
<tr><td><code>--step_dot_size</code></td><td><code>8px</code></td><td>Diameter of step indicator dots</td></tr>
|
|
763
|
+
<tr><td><code>--step_dot_background</code></td><td><code>var(--c_bg__alt)</code></td><td>Background of step dots</td></tr>
|
|
764
|
+
<tr><td><code>--step_dot_border</code></td><td><code>1px solid var(--c_border)</code></td><td>Border of step dots</td></tr>
|
|
765
|
+
</tbody>
|
|
766
|
+
</table>
|
|
767
|
+
|
|
768
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
769
|
+
<h5><code>change</code></h5>
|
|
770
|
+
<p>Fired when the value changes. The event <code>detail</code> contains <code>{ value: String }</code>. When a <code>format</code> is set, the value is formatted (e.g. <code>"$50.00"</code> or <code>"$20.00,$80.00"</code>). Without a format, the raw number string is used (e.g. <code>"50"</code> or <code>"20,80"</code>).</p>
|
|
771
|
+
|
|
772
|
+
</k-main>
|
|
773
|
+
<div style="height:33vh"></div>
|
|
774
|
+
<script type="module" src="../src/components/Main.js"></script>
|
|
775
|
+
|
|
776
|
+
<script type="module" src="../src/components/Slider.js"></script>
|
|
777
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
778
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
779
|
+
|
|
780
|
+
</body>
|
|
781
|
+
</html>
|