Skip to content

Commit 8d42cec

Browse files
SmartToolFactorySmartToolFactory
committed
update SliderWithLabel
1 parent a585400 commit 8d42cec

File tree

11 files changed

+312
-184
lines changed

11 files changed

+312
-184
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ Colorful sliders that can have Solid or Gradient colors for thumb or track which
33
thumb and track with varying sizes, borders with solid or gradient colors.
44
And Sliders with emojis, or custom Composables like **Icon**.
55

6-
| Dimensions | Gradient1 | Gradient2 | SliderWithTitle |
6+
| Dimensions | Properties | SliderWithTitle | Gradient1 |
77
| ----------|-----------| -----------| -----------|
8-
| <img src="./screenshots/slider1.gif"/> | <img src="./screenshots/slider2.gif"/> | <img src="./screenshots/slider3.gif"/> | <img src="./screenshots/slider4.gif"/> |
8+
| <img src="./screenshots/slider1.png"/> | <img src="./screenshots/slider2.png"/> | <img src="./screenshots/slider3.png"/> | <img src="./screenshots/slider4.png"/> |
99

1010

1111
### ColorfulSlider

‎app/src/main/java/com/smarttoolfactory/composematerialslider/MainActivity.kt‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@ import androidx.compose.ui.Modifier
1313
import androidx.compose.ui.graphics.Color
1414
import androidx.compose.ui.unit.dp
1515
import com.google.accompanist.pager.*
16-
import com.smarttoolfactory.composematerialslider.demo.ColorfulSliderDemo
17-
import com.smarttoolfactory.composematerialslider.demo.SliderGradientDemo
18-
import com.smarttoolfactory.composematerialslider.demo.SliderGradientDemo2
19-
import com.smarttoolfactory.composematerialslider.demo.SliderPropertiesDemo
16+
import com.smarttoolfactory.composematerialslider.demo.*
2017
import com.smarttoolfactory.composematerialslider.ui.theme.ComposeMaterialSliderTheme
2118
import kotlinx.coroutines.launch
2219

@@ -81,18 +78,20 @@ private fun HomeContent() {
8178

8279
when (page) {
8380
0 -> ColorfulSliderDemo()
84-
1 -> SliderGradientDemo()
85-
2 -> SliderGradientDemo2()
86-
else -> SliderPropertiesDemo()
81+
1 -> SliderPropertiesDemo()
82+
2 -> SliderWithLabelDemo()
83+
3 -> SliderGradientDemo()
84+
else -> SliderGradientDemo2()
8785
}
8886
}
8987
}
9088

9189
internal val tabList =
9290
listOf(
9391
"Slider Dimensions",
92+
"Slider Properties",
93+
"Slider with Label",
9494
"Slider Gradients1",
9595
"Slider Gradients2",
96-
"Slider Properties",
9796
)
9897

‎app/src/main/java/com/smarttoolfactory/composematerialslider/demo/ColorfulIconSliderDemo.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
package com.smarttoolfactory.composematerialslider.demo
2+

‎app/src/main/java/com/smarttoolfactory/composematerialslider/demo/ColorfulSliderDemo.kt‎

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -151,49 +151,6 @@ fun ColorfulSliderDemo() {
151151
)
152152
)
153153

154-
TitleText("Solid Border")
155-
var progress4 by remember { mutableStateOf(0f) }
156-
ColorfulSlider(
157-
value = progress4,
158-
thumbRadius = 10.dp,
159-
trackHeight = 12.dp,
160-
onValueChange = { value ->
161-
progress4 = value
162-
},
163-
colors = MaterialSliderDefaults.materialColors(
164-
activeTrackColor = SliderBrushColor(color = Color.Black),
165-
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
166-
),
167-
borderStroke = BorderStroke(1.dp, Color.Black)
168-
)
169-
170-
ColorfulSlider(
171-
value = progress4,
172-
thumbRadius = 12.dp,
173-
trackHeight = 14.dp,
174-
onValueChange = { value ->
175-
progress4 = value
176-
},
177-
colors = MaterialSliderDefaults.materialColors(
178-
activeTrackColor = SliderBrushColor(color = Red400),
179-
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
180-
),
181-
borderStroke = BorderStroke(1.dp, Red400)
182-
)
183-
184-
ColorfulSlider(
185-
value = progress4,
186-
thumbRadius = 10.dp,
187-
trackHeight = 14.dp,
188-
onValueChange = { value ->
189-
progress4 = value
190-
},
191-
colors = MaterialSliderDefaults.materialColors(
192-
activeTrackColor = SliderBrushColor(color = Blue400),
193-
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
194-
),
195-
borderStroke = BorderStroke(1.dp, Blue400)
196-
)
197154

198155
// ColorfulIconSlider(
199156
// modifier = Modifier.width(240.dp),
@@ -218,6 +175,6 @@ fun TitleText(text: String) {
218175
color = Blue400,
219176
fontSize = 14.sp,
220177
fontWeight = FontWeight.Bold,
221-
modifier = Modifier.padding(2.dp)
178+
modifier = Modifier.padding(horizontal=4.dp, vertical = 8.dp)
222179
)
223180
}

‎app/src/main/java/com/smarttoolfactory/composematerialslider/demo/SliderPropertiesDemo.kt‎

Lines changed: 44 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,20 @@
11
package com.smarttoolfactory.composematerialslider.demo
22

3-
import androidx.compose.foundation.background
3+
import androidx.compose.foundation.BorderStroke
44
import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.fillMaxSize
6-
import androidx.compose.foundation.layout.offset
76
import androidx.compose.foundation.layout.padding
87
import androidx.compose.foundation.rememberScrollState
9-
import androidx.compose.foundation.shape.CircleShape
10-
import androidx.compose.foundation.shape.RoundedCornerShape
118
import androidx.compose.foundation.verticalScroll
12-
import androidx.compose.material.Text
139
import androidx.compose.runtime.*
1410
import androidx.compose.ui.Modifier
15-
import androidx.compose.ui.draw.shadow
16-
import androidx.compose.ui.geometry.Offset
1711
import androidx.compose.ui.graphics.Color
18-
import androidx.compose.ui.layout.onSizeChanged
19-
import androidx.compose.ui.unit.IntOffset
2012
import androidx.compose.ui.unit.dp
21-
import com.smarttoolfactory.composematerialslider.ui.theme.Green400
22-
import com.smarttoolfactory.composematerialslider.ui.theme.Pink400
13+
import com.smarttoolfactory.composematerialslider.ui.theme.Blue400
2314
import com.smarttoolfactory.composematerialslider.ui.theme.Red400
2415
import com.smarttoolfactory.slider.ColorfulSlider
2516
import com.smarttoolfactory.slider.MaterialSliderDefaults
26-
import com.smarttoolfactory.slider.SliderWithTitle
27-
import kotlin.math.roundToInt
17+
import com.smarttoolfactory.slider.SliderBrushColor
2818

2919
@Composable
3020
fun SliderPropertiesDemo() {
@@ -35,96 +25,49 @@ fun SliderPropertiesDemo() {
3525
.verticalScroll(rememberScrollState())
3626
.padding(20.dp)
3727
) {
28+
TitleText("Solid Border")
29+
var progress1 by remember { mutableStateOf(0f) }
30+
ColorfulSlider(
31+
value = progress1,
32+
thumbRadius = 10.dp,
33+
trackHeight = 12.dp,
34+
onValueChange = { value ->
35+
progress1 = value
36+
},
37+
colors = MaterialSliderDefaults.materialColors(
38+
activeTrackColor = SliderBrushColor(color = Color.Black),
39+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
40+
),
41+
borderStroke = BorderStroke(1.dp, Color.Black)
42+
)
3843

39-
TitleText("SliderWithTitle")
40-
Column(modifier = Modifier.padding(horizontal = 24.dp)) {
41-
var labelProgress by remember { mutableStateOf(0f) }
42-
SliderWithTitle(
43-
value = labelProgress,
44-
onValueChange = {
45-
labelProgress = it
46-
},
47-
label = {
48-
Text(
49-
text = "$${labelProgress.roundToInt()}",
50-
modifier = Modifier
51-
.shadow(1.dp, shape = CircleShape)
52-
.background(Pink400, shape = CircleShape)
53-
.padding(5.dp),
54-
color = Color.White
55-
)
56-
},
57-
thumbRadius = 10.dp,
58-
trackHeight = 10.dp,
59-
valueRange = 0f..100f,
60-
colors = MaterialSliderDefaults.materialColors()
61-
)
62-
}
63-
64-
TitleText("Sliders that return value and offset")
65-
Column(modifier = Modifier.padding(horizontal = 24.dp)) {
66-
var labelProgress by remember { mutableStateOf(0f) }
67-
var labelOffset by remember { mutableStateOf(Offset.Zero) }
68-
69-
var labelWidth = 0
70-
Text(text = "Label",
71-
modifier = Modifier
72-
.offset {
73-
IntOffset(labelOffset.x.toInt() - labelWidth / 2, labelOffset.y.toInt())
74-
}
75-
.onSizeChanged {
76-
labelWidth = it.width
77-
}
78-
.shadow(1.dp, shape = RoundedCornerShape(10.dp))
79-
.background(Red400, shape = RoundedCornerShape(10.dp))
80-
.padding(5.dp),
81-
color = Color.White
82-
)
83-
84-
ColorfulSlider(
85-
value = labelProgress,
86-
onValueChange = { value, offset ->
87-
labelProgress = value
88-
labelOffset = offset
89-
},
90-
thumbRadius = 10.dp,
91-
trackHeight = 10.dp,
92-
colors = MaterialSliderDefaults.materialColors()
93-
)
94-
}
95-
96-
Column(modifier = Modifier.padding(horizontal = 24.dp)) {
97-
98-
var labelProgress by remember { mutableStateOf(0f) }
99-
var labelOffset by remember { mutableStateOf(Offset.Zero) }
100-
101-
var labelWidth by remember { mutableStateOf(0) }
102-
Text(text = "Price $${labelProgress.roundToInt()}",
103-
modifier = Modifier
104-
.offset {
105-
IntOffset(labelOffset.x.toInt() - labelWidth / 2, labelOffset.y.toInt())
106-
}
107-
.onSizeChanged {
108-
labelWidth = it.width
109-
}
110-
.shadow(1.dp, shape = RoundedCornerShape(10.dp))
111-
.background(Green400, shape = RoundedCornerShape(10.dp))
112-
.padding(5.dp),
113-
color = Color.White
114-
)
44+
ColorfulSlider(
45+
value = progress1,
46+
thumbRadius = 12.dp,
47+
trackHeight = 14.dp,
48+
onValueChange = { value ->
49+
progress1 = value
50+
},
51+
colors = MaterialSliderDefaults.materialColors(
52+
activeTrackColor = SliderBrushColor(color = Red400),
53+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
54+
),
55+
borderStroke = BorderStroke(1.dp, Red400)
56+
)
11557

116-
ColorfulSlider(
117-
value = labelProgress,
118-
onValueChange = { value, offset ->
119-
labelProgress = value
120-
labelOffset = offset
121-
},
122-
thumbRadius = 10.dp,
123-
trackHeight = 10.dp,
124-
valueRange = 0f..100f,
125-
colors = MaterialSliderDefaults.materialColors()
126-
)
127-
}
58+
ColorfulSlider(
59+
value = progress1,
60+
thumbRadius = 10.dp,
61+
trackHeight = 14.dp,
62+
onValueChange = { value ->
63+
progress1 = value
64+
},
65+
colors = MaterialSliderDefaults.materialColors(
66+
activeTrackColor = SliderBrushColor(color = Blue400),
67+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
68+
),
69+
borderStroke = BorderStroke(1.dp, Blue400)
70+
)
12871

12972
TitleText("Draw Inactive Color Option")
13073
var progress2 by remember { mutableStateOf(0f) }

0 commit comments

Comments
 (0)