Skip to content

Commit e76a68c

Browse files
YuKongAYuKongA
authored
library: refactor Slider component (#132)
* Uses the same params as `androidx-main` * Adds `VerticalSlider` and `RangeSlider` * Supports snap-together `keyPoints`
1 parent 234c31c commit e76a68c

File tree

8 files changed

+1493
-170
lines changed

8 files changed

+1493
-170
lines changed

‎docs/components/slider.md‎

Lines changed: 221 additions & 48 deletions
Large diffs are not rendered by default.

‎docs/demo/src/commonMain/kotlin/SliderDemo.kt‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import androidx.compose.ui.Modifier
1919
import androidx.compose.ui.graphics.Brush
2020
import androidx.compose.ui.graphics.Color
2121
import androidx.compose.ui.unit.dp
22+
import top.yukonga.miuix.kmp.basic.RangeSlider
2223
import top.yukonga.miuix.kmp.basic.Slider
2324

2425
@Composable
@@ -39,15 +40,20 @@ fun SliderDemo() {
3940
) {
4041
var slider1 by remember { mutableStateOf(0.5f) }
4142
var slider2 by remember { mutableStateOf(0.7f) }
43+
var slider3 by remember { mutableStateOf(0.2f..0.8f) }
4244
Slider(
43-
progress = slider1,
44-
onProgressChange = { slider1 = it }
45+
value = slider1,
46+
onValueChange = { slider1 = it }
4547
)
4648
Slider(
47-
progress = slider2,
48-
onProgressChange = { slider2 = it },
49+
value = slider2,
50+
onValueChange = { slider2 = it },
4951
enabled = false
5052
)
53+
RangeSlider(
54+
value = slider3,
55+
onValueChange = { slider3 = it }
56+
)
5157
}
5258
}
5359
}

‎docs/zh_CN/components/slider.md‎

Lines changed: 216 additions & 43 deletions
Large diffs are not rendered by default.

‎example/src/commonMain/kotlin/component/OtherComponent.kt‎

Lines changed: 284 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import androidx.compose.animation.core.infiniteRepeatable
99
import androidx.compose.animation.core.rememberInfiniteTransition
1010
import androidx.compose.animation.core.tween
1111
import androidx.compose.foundation.layout.Arrangement
12+
import androidx.compose.foundation.layout.Column
1213
import androidx.compose.foundation.layout.FlowRow
1314
import androidx.compose.foundation.layout.PaddingValues
1415
import androidx.compose.foundation.layout.Row
@@ -35,6 +36,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
3536
import androidx.compose.ui.text.font.FontWeight
3637
import androidx.compose.ui.text.input.ImeAction
3738
import androidx.compose.ui.text.input.TextFieldValue
39+
import androidx.compose.ui.text.style.TextAlign
3840
import androidx.compose.ui.unit.dp
3941
import androidx.compose.ui.unit.sp
4042
import top.yukonga.miuix.kmp.basic.ButtonDefaults
@@ -47,6 +49,7 @@ import top.yukonga.miuix.kmp.basic.ColorSpace
4749
import top.yukonga.miuix.kmp.basic.Icon
4850
import top.yukonga.miuix.kmp.basic.InfiniteProgressIndicator
4951
import top.yukonga.miuix.kmp.basic.LinearProgressIndicator
52+
import top.yukonga.miuix.kmp.basic.RangeSlider
5053
import top.yukonga.miuix.kmp.basic.Slider
5154
import top.yukonga.miuix.kmp.basic.SliderDefaults
5255
import top.yukonga.miuix.kmp.basic.SmallTitle
@@ -55,12 +58,13 @@ import top.yukonga.miuix.kmp.basic.TabRowWithContour
5558
import top.yukonga.miuix.kmp.basic.Text
5659
import top.yukonga.miuix.kmp.basic.TextButton
5760
import top.yukonga.miuix.kmp.basic.TextField
61+
import top.yukonga.miuix.kmp.basic.VerticalSlider
5862
import top.yukonga.miuix.kmp.icon.MiuixIcons
5963
import top.yukonga.miuix.kmp.icon.icons.useful.Like
6064
import top.yukonga.miuix.kmp.theme.MiuixTheme
65+
import top.yukonga.miuix.kmp.utils.PressFeedbackType
6166
import top.yukonga.miuix.kmp.utils.toHsv
6267
import top.yukonga.miuix.kmp.utils.toOkLab
63-
import top.yukonga.miuix.kmp.utils.PressFeedbackType
6468
import kotlin.math.round
6569

6670
fun LazyListScope.otherComponent(
@@ -222,33 +226,292 @@ fun LazyListScope.otherComponent(
222226

223227
item(key = "slider") {
224228
SmallTitle(text = "Slider")
225-
var progress by remember { mutableStateOf(0.5f) }
226-
Slider(
227-
progress = progress,
228-
onProgressChange = { newProgress -> progress = newProgress },
229-
decimalPlaces = 3,
229+
Card(
230230
modifier = Modifier
231231
.padding(horizontal = 12.dp)
232-
.padding(bottom = 12.dp)
233-
)
234-
var progressHaptic by remember { mutableStateOf(0.5f) }
235-
Slider(
236-
progress = progressHaptic,
237-
onProgressChange = { newProgress -> progressHaptic = newProgress },
238-
hapticEffect = SliderDefaults.SliderHapticEffect.Step,
232+
.padding(bottom = 6.dp)
233+
) {
234+
var sliderValue by remember { mutableStateOf(0.3f) }
235+
Text(
236+
text = "Normal: ${(sliderValue * 100).toInt()}%",
237+
fontSize = 14.sp,
238+
modifier = Modifier
239+
.padding(horizontal = 12.dp)
240+
.padding(top = 12.dp, bottom = 4.dp)
241+
)
242+
Slider(
243+
value = sliderValue,
244+
onValueChange = { sliderValue = it },
245+
modifier = Modifier
246+
.padding(horizontal = 12.dp)
247+
.padding(bottom = 12.dp)
248+
)
249+
var stepsValue by remember { mutableStateOf(5f) }
250+
Text(
251+
text = "Steps: ${stepsValue.toInt()}/8",
252+
fontSize = 14.sp,
253+
modifier = Modifier
254+
.padding(horizontal = 12.dp)
255+
.padding(top = 12.dp, bottom = 4.dp)
256+
)
257+
Slider(
258+
value = stepsValue,
259+
onValueChange = { stepsValue = it },
260+
valueRange = 0f..8f,
261+
steps = 7,
262+
hapticEffect = SliderDefaults.SliderHapticEffect.Step,
263+
modifier = Modifier
264+
.padding(horizontal = 12.dp)
265+
.padding(bottom = 12.dp)
266+
)
267+
var stepsWithKeyPointsValue by remember { mutableStateOf(5f) }
268+
Text(
269+
text = "Steps with Key Points: ${stepsWithKeyPointsValue.toInt()}/8",
270+
fontSize = 14.sp,
271+
modifier = Modifier
272+
.padding(horizontal = 12.dp)
273+
.padding(top = 12.dp, bottom = 4.dp)
274+
)
275+
Slider(
276+
value = stepsWithKeyPointsValue,
277+
onValueChange = { stepsWithKeyPointsValue = it },
278+
valueRange = 0f..8f,
279+
steps = 7,
280+
hapticEffect = SliderDefaults.SliderHapticEffect.Step,
281+
showKeyPoints = true,
282+
modifier = Modifier
283+
.padding(horizontal = 12.dp)
284+
.padding(bottom = 12.dp)
285+
)
286+
var customKeyPointsValue by remember { mutableStateOf(25f) }
287+
Text(
288+
text = "Custom Key Points: ${customKeyPointsValue.toInt()}%",
289+
fontSize = 14.sp,
290+
modifier = Modifier
291+
.padding(horizontal = 12.dp)
292+
.padding(top = 12.dp, bottom = 4.dp)
293+
)
294+
Slider(
295+
value = customKeyPointsValue,
296+
onValueChange = { customKeyPointsValue = it },
297+
valueRange = 0f..100f,
298+
showKeyPoints = true,
299+
hapticEffect = SliderDefaults.SliderHapticEffect.Step,
300+
keyPoints = listOf(0f, 25f, 50f, 75f, 100f),
301+
modifier = Modifier
302+
.padding(horizontal = 12.dp)
303+
.padding(bottom = 12.dp)
304+
)
305+
val disabledValue by remember { mutableStateOf(0.7f) }
306+
Text(
307+
text = "Disabled: ${(disabledValue * 100).toInt()}%",
308+
fontSize = 14.sp,
309+
modifier = Modifier
310+
.padding(horizontal = 12.dp)
311+
.padding(top = 12.dp, bottom = 4.dp)
312+
)
313+
Slider(
314+
value = disabledValue,
315+
onValueChange = {},
316+
enabled = false,
317+
modifier = Modifier
318+
.padding(horizontal = 12.dp)
319+
.padding(bottom = 12.dp)
320+
)
321+
}
322+
323+
// RangeSlider
324+
SmallTitle(text = "RangeSlider")
325+
Card(
239326
modifier = Modifier
240327
.padding(horizontal = 12.dp)
241-
.padding(bottom = 12.dp)
242-
)
243-
val progressDisable by remember { mutableStateOf(0.5f) }
244-
Slider(
245-
progress = progressDisable,
246-
onProgressChange = {},
247-
enabled = false,
328+
.padding(bottom = 6.dp)
329+
) {
330+
var rangeValue by remember { mutableStateOf(0.2f..0.8f) }
331+
Text(
332+
text = "Range: ${(rangeValue.start * 100).toInt()}% - ${(rangeValue.endInclusive * 100).toInt()}%",
333+
fontSize = 14.sp,
334+
modifier = Modifier
335+
.padding(horizontal = 12.dp)
336+
.padding(top = 12.dp, bottom = 4.dp)
337+
)
338+
RangeSlider(
339+
value = rangeValue,
340+
onValueChange = { rangeValue = it },
341+
modifier = Modifier
342+
.padding(horizontal = 12.dp)
343+
.padding(bottom = 12.dp)
344+
)
345+
var rangeStepsValue by remember { mutableStateOf(2f..8f) }
346+
Text(
347+
text = "Range with Key Points: ${rangeStepsValue.start.toInt()} - ${rangeStepsValue.endInclusive.toInt()}",
348+
fontSize = 14.sp,
349+
modifier = Modifier
350+
.padding(horizontal = 12.dp)
351+
.padding(top = 12.dp, bottom = 4.dp)
352+
)
353+
RangeSlider(
354+
value = rangeStepsValue,
355+
onValueChange = { rangeStepsValue = it },
356+
valueRange = 0f..8f,
357+
steps = 7,
358+
hapticEffect = SliderDefaults.SliderHapticEffect.Step,
359+
showKeyPoints = true,
360+
modifier = Modifier
361+
.padding(horizontal = 12.dp)
362+
.padding(bottom = 12.dp)
363+
)
364+
var customRangeValue by remember { mutableStateOf(20f..80f) }
365+
Text(
366+
text = "Custom Range Points: ${customRangeValue.start.toInt()}% - ${customRangeValue.endInclusive.toInt()}%",
367+
fontSize = 14.sp,
368+
modifier = Modifier
369+
.padding(horizontal = 12.dp)
370+
.padding(top = 12.dp, bottom = 4.dp)
371+
)
372+
RangeSlider(
373+
value = customRangeValue,
374+
onValueChange = { customRangeValue = it },
375+
valueRange = 0f..100f,
376+
showKeyPoints = true,
377+
hapticEffect = SliderDefaults.SliderHapticEffect.Step,
378+
keyPoints = listOf(0f, 20f, 40f, 60f, 80f, 100f),
379+
modifier = Modifier
380+
.padding(horizontal = 12.dp)
381+
.padding(bottom = 12.dp)
382+
)
383+
var disabledRangeValue by remember { mutableStateOf(0.3f..0.7f) }
384+
Text(
385+
text = "Disabled: ${(disabledRangeValue.start * 100).toInt()}% - ${(disabledRangeValue.endInclusive * 100).toInt()}%",
386+
fontSize = 14.sp,
387+
modifier = Modifier
388+
.padding(horizontal = 12.dp)
389+
.padding(top = 12.dp, bottom = 4.dp)
390+
)
391+
RangeSlider(
392+
value = disabledRangeValue,
393+
onValueChange = {},
394+
enabled = false,
395+
modifier = Modifier
396+
.padding(horizontal = 12.dp)
397+
.padding(bottom = 12.dp)
398+
)
399+
}
400+
401+
// VerticalSlider
402+
SmallTitle(text = "VerticalSlider")
403+
Card(
248404
modifier = Modifier
249405
.padding(horizontal = 12.dp)
250406
.padding(bottom = 6.dp)
251-
)
407+
) {
408+
Row(
409+
modifier = Modifier
410+
.fillMaxWidth()
411+
.padding(horizontal = 12.dp)
412+
.padding(vertical = 12.dp),
413+
horizontalArrangement = Arrangement.SpaceEvenly,
414+
verticalAlignment = Alignment.CenterVertically
415+
) {
416+
var verticalValue1 by remember { mutableStateOf(0.3f) }
417+
Column(
418+
horizontalAlignment = Alignment.CenterHorizontally,
419+
modifier = Modifier.weight(1f)
420+
) {
421+
VerticalSlider(
422+
value = verticalValue1,
423+
onValueChange = { verticalValue1 = it },
424+
modifier = Modifier.size(25.dp, 160.dp)
425+
)
426+
Text(
427+
text = "Normal\n${(verticalValue1 * 100).toInt()}%",
428+
fontSize = 12.sp,
429+
textAlign = TextAlign.Center,
430+
modifier = Modifier.fillMaxWidth()
431+
)
432+
}
433+
var verticalValue2 by remember { mutableStateOf(5f) }
434+
Column(
435+
horizontalAlignment = Alignment.CenterHorizontally,
436+
modifier = Modifier.weight(1f)
437+
) {
438+
VerticalSlider(
439+
value = verticalValue2,
440+
onValueChange = { verticalValue2 = it },
441+
valueRange = 0f..8f,
442+
steps = 7,
443+
hapticEffect = SliderDefaults.SliderHapticEffect.Step,
444+
modifier = Modifier.size(25.dp, 160.dp)
445+
)
446+
Text(
447+
text = "Steps\n${verticalValue2.toInt()}/8",
448+
fontSize = 12.sp,
449+
textAlign = TextAlign.Center,
450+
modifier = Modifier.fillMaxWidth()
451+
)
452+
}
453+
var verticalValue3 by remember { mutableStateOf(5f) }
454+
Column(
455+
horizontalAlignment = Alignment.CenterHorizontally,
456+
modifier = Modifier.weight(1f)
457+
) {
458+
VerticalSlider(
459+
value = verticalValue3,
460+
onValueChange = { verticalValue3 = it },
461+
valueRange = 0f..8f,
462+
steps = 7,
463+
hapticEffect = SliderDefaults.SliderHapticEffect.Step,
464+
showKeyPoints = true,
465+
modifier = Modifier.size(25.dp, 160.dp)
466+
)
467+
Text(
468+
text = "Points\n${verticalValue3.toInt()}/8",
469+
fontSize = 12.sp,
470+
textAlign = TextAlign.Center,
471+
modifier = Modifier.fillMaxWidth()
472+
)
473+
}
474+
var verticalValue4 by remember { mutableStateOf(50f) }
475+
Column(
476+
horizontalAlignment = Alignment.CenterHorizontally,
477+
modifier = Modifier.weight(1f)
478+
) {
479+
VerticalSlider(
480+
value = verticalValue4,
481+
onValueChange = { verticalValue4 = it },
482+
valueRange = 0f..100f,
483+
showKeyPoints = true,
484+
hapticEffect = SliderDefaults.SliderHapticEffect.Step,
485+
keyPoints = listOf(0f, 25f, 50f, 75f, 100f),
486+
modifier = Modifier.size(25.dp, 160.dp)
487+
)
488+
Text(
489+
text = "Custom\n${verticalValue4.toInt()}%",
490+
fontSize = 12.sp,
491+
textAlign = TextAlign.Center,
492+
modifier = Modifier.fillMaxWidth()
493+
)
494+
}
495+
val disabledVerticalValue by remember { mutableStateOf(0.7f) }
496+
Column(
497+
horizontalAlignment = Alignment.CenterHorizontally,
498+
modifier = Modifier.weight(1f)
499+
) {
500+
VerticalSlider(
501+
value = disabledVerticalValue,
502+
onValueChange = {},
503+
enabled = false,
504+
modifier = Modifier.size(25.dp, 160.dp)
505+
)
506+
Text(
507+
text = "Disabled\n${(disabledVerticalValue * 100).toInt()}%",
508+
fontSize = 12.sp,
509+
textAlign = TextAlign.Center,
510+
modifier = Modifier.fillMaxWidth()
511+
)
512+
}
513+
}
514+
}
252515
}
253516

254517
item(key = "tabRow") {

‎example/src/commonMain/kotlin/component/TextComponent.kt‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -510,11 +510,10 @@ fun BottomSheet(
510510
) {
511511
LazyColumn {
512512
item {
513-
var progress by remember { mutableStateOf(0.5f) }
513+
var sliderValue by remember { mutableStateOf(0.5f) }
514514
Slider(
515-
progress = progress,
516-
onProgressChange = { newProgress -> progress = newProgress },
517-
decimalPlaces = 3,
515+
value = sliderValue,
516+
onValueChange = { sliderValue = it },
518517
modifier = Modifier.padding(bottom = 12.dp)
519518
)
520519
Card(

0 commit comments

Comments
 (0)