1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44

"use client";

import { useState } from "react";
import { Slider } from "@gunkin/uiify";
import { SliderClient } from "@gunkin/uiify/components/slider/client";

export default function Example() {
  const [volume, setVolume] = useState(40);
  const [value, setValue] = useState(70);

  return (
    <div>
      <label>
        <span>
          Volume: <output htmlFor="example-volume">{volume}%</output>
        </span>
        <Slider aria-label="Volume" id="example-volume" className="" onValueChange={setVolume} value={volume} />
      </label>
      <label>
        <span>
          Quality: <output htmlFor="example-quality">{value}%</output>
        </span>
        <SliderClient
          aria-label="Quality"
          id="example-quality"
          className=""
          marks={[
            { value: 0, label: "Draft" },
            { value: 25, label: "Standard" },
            { value: 70, label: "High" },
            { value: 100, label: "Ultra" },
          ]}
          max={100}
          min={0}
          onValueChange={(next) => {
            if (typeof next === "number") setValue(next);
          }}
          step={null}
          value={value}
        />
      </label>
    </div>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114
115. 115
116. 116
117. 117
118. 118
119. 119
120. 120
121. 121
122. 122
123. 123
124. 124
125. 125
126. 126
127. 127
128. 128
129. 129
130. 130
131. 131
132. 132
133. 133
134. 134
135. 135
136. 136
137. 137
138. 138
139. 139
140. 140
141. 141
142. 142
143. 143
144. 144
145. 145
146. 146
147. 147
148. 148
149. 149
150. 150
151. 151
152. 152
153. 153
154. 154
155. 155
156. 156
157. 157
158. 158
159. 159
160. 160
161. 161
162. 162
163. 163
164. 164
165. 165
166. 166
167. 167
168. 168
169. 169
170. 170
171. 171
172. 172
173. 173
174. 174
175. 175
176. 176
177. 177
178. 178
179. 179
180. 180
181. 181
182. 182
183. 183
184. 184
185. 185
186. 186
187. 187
188. 188
189. 189
190. 190
191. 191
192. 192
193. 193
194. 194
195. 195
196. 196
197. 197
198. 198
199. 199
200. 200
201. 201
202. 202
203. 203
204. 204
205. 205
206. 206
207. 207
208. 208
209. 209
210. 210
211. 211
212. 212
213. 213
214. 214
215. 215
216. 216
217. 217
218. 218
219. 219
220. 220
221. 221
222. 222
223. 223
224. 224
225. 225
226. 226
227. 227
228. 228
229. 229
230. 230
231. 231
232. 232
233. 233
234. 234
235. 235
236. 236
237. 237
238. 238
239. 239
240. 240
241. 241
242. 242
243. 243
244. 244
245. 245
246. 246
247. 247
248. 248
249. 249

/* Native controls stay visible until hydration; the client entry then adds a
   labeled track while retaining the real range inputs for input semantics. */

@layer components {
  [data-uiify-slider],
  [data-uiify-slider-client] {
    --uiify-slider-track-size: 0.375rem;
    --uiify-slider-track-radius: 999px;
    --uiify-slider-thumb-size: 1.125rem;
  }

  [data-uiify-slider] {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    max-inline-size: 22rem;
    min-inline-size: 14rem;
    min-block-size: var(--control-md);
    padding-inline: 0.5625rem;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
  }

  [data-uiify-slider]::-webkit-slider-runnable-track {
    block-size: var(--uiify-slider-track-size);
    border-radius: var(--uiify-slider-track-radius);
    background: linear-gradient(
      to right,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]::-webkit-slider-thumb {
    box-sizing: border-box;
    inline-size: var(--uiify-slider-thumb-size);
    block-size: var(--uiify-slider-thumb-size);
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    margin-block-start: calc((var(--uiify-slider-track-size) - var(--uiify-slider-thumb-size)) / 2);
    appearance: none;
  }

  [data-uiify-slider]::-moz-range-thumb {
    box-sizing: border-box;
    inline-size: var(--uiify-slider-thumb-size);
    block-size: var(--uiify-slider-thumb-size);
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
  }

  [data-uiify-slider]::-moz-range-track {
    block-size: var(--uiify-slider-track-size);
    border: 0;
    border-radius: var(--uiify-slider-track-radius);
    background: linear-gradient(
      to right,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]::-moz-range-progress {
    background: transparent;
  }

  [data-uiify-slider]:dir(rtl)::-webkit-slider-runnable-track {
    background-image: linear-gradient(
      to left,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]:dir(rtl)::-moz-range-track {
    background-image: linear-gradient(
      to left,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 0.25rem;
  }

  [data-uiify-slider]:disabled,
  [data-uiify-slider][data-disabled] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  [data-uiify-slider-client] {
    position: relative;
    display: grid;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 22rem;
    min-inline-size: 14rem;
    min-block-size: var(--control-md);
    accent-color: var(--primary);
  }

  [data-uiify-slider-client] > input[data-part="thumb"] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    accent-color: var(--primary);
    opacity: 0.001;
  }

  [data-uiify-slider-client] [data-part="track"] {
    position: absolute;
    display: block;
    inset-inline: 0.5625rem;
    inset-block-start: 50%;
    block-size: var(--uiify-slider-track-size);
    border-radius: var(--uiify-slider-track-radius);
    background: var(--muted);
    pointer-events: none;
    translate: 0 -50%;
  }

  [data-uiify-slider-client][data-enhanced][data-range] > input[data-part="thumb"]:first-of-type {
    clip-path: inset(0 calc(100% - var(--uiify-slider-middle)) 0 0);
  }

  [data-uiify-slider-client][data-enhanced][data-range] > input[data-part="thumb"]:last-of-type {
    clip-path: inset(0 0 0 var(--uiify-slider-middle));
  }

  [data-uiify-slider-client] [data-part="range"] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--uiify-slider-start);
    inline-size: calc(var(--uiify-slider-end) - var(--uiify-slider-start));
    border-radius: var(--uiify-slider-track-radius);
    background: var(--primary);
  }

  [data-uiify-slider-client] [data-part="mark"] {
    position: absolute;
    z-index: 1;
    inset-block-start: calc(50% + 0.75rem);
    inset-inline-start: var(--uiify-slider-position);
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1;
    text-align: center;
    translate: -50% 0;
  }

  [data-uiify-slider-client] [data-part="mark"]::before {
    inline-size: 1px;
    block-size: 0.4rem;
    background: currentcolor;
    content: "";
  }

  [data-uiify-slider-client] [data-part="visual-thumb"] {
    position: absolute;
    z-index: 2;
    inset-block-start: 50%;
    inset-inline-start: var(--uiify-slider-position);
    inline-size: var(--uiify-slider-thumb-size);
    aspect-ratio: 1;
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    translate: -50% -50%;
  }

  [data-uiify-slider-client]:has(input:focus-visible) [data-part="track"] {
    outline: 3px solid var(--ring);
    outline-offset: 0.25rem;
  }

  [data-uiify-slider-client][data-disabled] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  [data-uiify-slider-client][data-disabled] > input {
    cursor: not-allowed;
  }

  [data-uiify-slider-client][data-orientation="vertical"] {
    inline-size: 14rem;
    max-inline-size: none;
    block-size: 3rem;
    writing-mode: vertical-rl;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="track"] {
    inset-inline: 0.5625rem;
    inset-block: 50% auto;
    inline-size: auto;
    block-size: 0.375rem;
    translate: 50% 0;
  }

  [data-uiify-slider-client][data-enhanced][data-range][data-orientation="vertical"]
    > input[data-part="thumb"]:first-of-type {
    clip-path: inset(0 0 calc(100% - var(--uiify-slider-middle)) 0);
  }

  [data-uiify-slider-client][data-enhanced][data-range][data-orientation="vertical"]
    > input[data-part="thumb"]:last-of-type {
    clip-path: inset(var(--uiify-slider-middle) 0 0 0);
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="range"] {
    inset-block: 0;
    inset-inline: var(--uiify-slider-start) auto;
    inline-size: calc(var(--uiify-slider-end) - var(--uiify-slider-start));
    block-size: 100%;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="mark"] {
    inset-block-start: var(--uiify-slider-position);
    inset-inline: calc(50% + 0.75rem) auto;
    justify-items: start;
    writing-mode: horizontal-tb;
    translate: 0 -50%;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="mark"]::before {
    inline-size: 0.4rem;
    block-size: 1px;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="visual-thumb"] {
    inset-block-start: 50%;
    inset-inline-start: var(--uiify-slider-position);
    translate: 50% -50%;
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102

"use client";

import { useState } from "react";
import { Slider } from "@gunkin/uiify";
import { SliderClient } from "@gunkin/uiify/components/slider/client";

export default function Example() {
  const [volume, setVolume] = useState(40);
  const [value, setValue] = useState(70);

  return (
    <div>
      <label>
        <span>
          Volume: <output htmlFor="example-volume">{volume}%</output>
        </span>
        <Slider
          aria-label="Volume"
          id="example-volume"
          className={
            "[--uiify-slider-track-size:0.375rem] [--uiify-slider-track-radius:999px] [--uiify-slider-thumb-size:1.1" +
            "25rem] box-border block w-full [max-inline-size:22rem] [min-inline-size:14rem] [min-block-size:var(--co" +
            "ntrol-md)] [padding-inline:0.5625rem] appearance-none bg-transparent cursor-pointer [&::-webkit-slider-" +
            "runnable-track]:[block-size:var(--uiify-slider-track-size)] [&::-webkit-slider-runnable-track]:[border-" +
            "radius:var(--uiify-slider-track-radius)] [&::-webkit-slider-runnable-track]:[background:linear-gradient" +
            "(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50" +
            "%)_100%)] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:[inline-size:var(--uiify-slide" +
            "r-thumb-size)] [&::-webkit-slider-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider" +
            "-thumb]:[border:2px_solid_var(--background)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-" +
            "thumb]:bg-primary [&::-webkit-slider-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-webkit-slider-th" +
            "umb]:[margin-block-start:calc((var(--uiify-slider-track-size)_-_var(--uiify-slider-thumb-size))_/_2)] [" +
            "&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:[inline" +
            "-size:var(--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[block-size:var(--uiify-slider-thumb-size)]" +
            " [&::-moz-range-thumb]:[border:2px_solid_var(--background)] [&::-moz-range-thumb]:rounded-full [&::-moz" +
            "-range-thumb]:bg-primary [&::-moz-range-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-moz-range-tra" +
            "ck]:[block-size:var(--uiify-slider-track-size)] [&::-moz-range-track]:border-0 [&::-moz-range-track]:bo" +
            "rder-none [&::-moz-range-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-moz-range-track]:" +
            "[background:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var" +
            "(--uiify-slider-progress,50%)_100%)] [&::-moz-range-progress]:bg-transparent [&:dir(rtl)::-webkit-slide" +
            "r-runnable-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progres" +
            "s,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] [&:dir(rtl)::-moz-range-track]:[background-" +
            "image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiif" +
            "y-slider-progress,50%)_100%)] focus-visible:[outline:3px_solid_var(--ring)] focus-visible:[outline-offs" +
            "et:0.25rem] disabled:opacity-55 disabled:cursor-not-allowed data-[disabled]:opacity-55 data-[disabled]:" +
            "cursor-not-allowed"
          }
          onValueChange={setVolume}
          value={volume}
        />
      </label>
      <label>
        <span>
          Quality: <output htmlFor="example-quality">{value}%</output>
        </span>
        <SliderClient
          aria-label="Quality"
          id="example-quality"
          className={
            "[--uiify-slider-track-size:0.375rem] [--uiify-slider-track-radius:999px] [--uiify-slider-thumb-size:1.1" +
            "25rem] box-border block w-full [max-inline-size:22rem] [min-inline-size:14rem] [min-block-size:var(--co" +
            "ntrol-md)] [padding-inline:0.5625rem] appearance-none bg-transparent cursor-pointer [&::-webkit-slider-" +
            "runnable-track]:[block-size:var(--uiify-slider-track-size)] [&::-webkit-slider-runnable-track]:[border-" +
            "radius:var(--uiify-slider-track-radius)] [&::-webkit-slider-runnable-track]:[background:linear-gradient" +
            "(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50" +
            "%)_100%)] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:[inline-size:var(--uiify-slide" +
            "r-thumb-size)] [&::-webkit-slider-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider" +
            "-thumb]:[border:2px_solid_var(--background)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-" +
            "thumb]:bg-primary [&::-webkit-slider-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-webkit-slider-th" +
            "umb]:[margin-block-start:calc((var(--uiify-slider-track-size)_-_var(--uiify-slider-thumb-size))_/_2)] [" +
            "&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:[inline" +
            "-size:var(--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[block-size:var(--uiify-slider-thumb-size)]" +
            " [&::-moz-range-thumb]:[border:2px_solid_var(--background)] [&::-moz-range-thumb]:rounded-full [&::-moz" +
            "-range-thumb]:bg-primary [&::-moz-range-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-moz-range-tra" +
            "ck]:[block-size:var(--uiify-slider-track-size)] [&::-moz-range-track]:border-0 [&::-moz-range-track]:bo" +
            "rder-none [&::-moz-range-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-moz-range-track]:" +
            "[background:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var" +
            "(--uiify-slider-progress,50%)_100%)] [&::-moz-range-progress]:bg-transparent [&:dir(rtl)::-webkit-slide" +
            "r-runnable-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progres" +
            "s,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] [&:dir(rtl)::-moz-range-track]:[background-" +
            "image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiif" +
            "y-slider-progress,50%)_100%)] focus-visible:[outline:3px_solid_var(--ring)] focus-visible:[outline-offs" +
            "et:0.25rem] disabled:opacity-55 disabled:cursor-not-allowed data-[disabled]:opacity-55 data-[disabled]:" +
            "cursor-not-allowed"
          }
          marks={[
            { value: 0, label: "Draft" },
            { value: 25, label: "Standard" },
            { value: 70, label: "High" },
            { value: 100, label: "Ultra" },
          ]}
          max={100}
          min={0}
          onValueChange={(next) => {
            if (typeof next === "number") setValue(next);
          }}
          step={null}
          value={value}
        />
      </label>
    </div>
  );
}