Skip to content

Commit a585400

Browse files
SmartToolFactorySmartToolFactory
committed
add border to ColorfulSlider
1 parent d303e4c commit a585400

File tree

5 files changed

+181
-32
lines changed

5 files changed

+181
-32
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
### Jetpack Compose Colorful Customizable Sliders
22
Colorful sliders that can have Solid or Gradient colors for thumb or track which can have
3-
thumb and track with varying sizes.
3+
thumb and track with varying sizes, borders with solid or gradient colors.
4+
And Sliders with emojis, or custom Composables like **Icon**.
45

56
| Dimensions | Gradient1 | Gradient2 | SliderWithTitle |
67
| ----------|-----------| -----------| -----------|
@@ -11,6 +12,9 @@ Colorful sliders that can have Solid or Gradient colors for thumb or track which
1112
Sliders that can use Color or gradient for track, thumb, or tick colors with custom
1213
thumb and track heights.
1314

15+
### SliderWithLabel
16+
Sliders that can move a label above the Slider and display progress
17+
1418
### IconSlider
1519
Sliders that can use any Composable for thumb and use Color or gradient for track, thumb, or tick colors with custom
1620
thumb and track heights.

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package com.smarttoolfactory.composematerialslider.demo
22

3+
import androidx.compose.foundation.BorderStroke
34
import androidx.compose.foundation.layout.Column
45
import androidx.compose.foundation.layout.fillMaxSize
56
import androidx.compose.foundation.layout.padding
@@ -8,6 +9,7 @@ import androidx.compose.foundation.verticalScroll
89
import androidx.compose.material.Text
910
import androidx.compose.runtime.*
1011
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.graphics.Color
1113
import androidx.compose.ui.text.font.FontWeight
1214
import androidx.compose.ui.unit.dp
1315
import androidx.compose.ui.unit.sp
@@ -149,6 +151,50 @@ fun ColorfulSliderDemo() {
149151
)
150152
)
151153

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+
)
197+
152198
// ColorfulIconSlider(
153199
// modifier = Modifier.width(240.dp),
154200
// value = red,

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

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package com.smarttoolfactory.composematerialslider.demo
22

3+
import androidx.compose.foundation.BorderStroke
34
import androidx.compose.foundation.layout.Column
45
import androidx.compose.foundation.layout.fillMaxSize
56
import androidx.compose.foundation.layout.padding
@@ -9,10 +10,13 @@ import androidx.compose.runtime.*
910
import androidx.compose.ui.Modifier
1011
import androidx.compose.ui.geometry.Offset
1112
import androidx.compose.ui.graphics.Brush
13+
import androidx.compose.ui.graphics.Color
1214
import androidx.compose.ui.platform.LocalDensity
1315
import androidx.compose.ui.unit.dp
14-
import com.smarttoolfactory.composematerialslider.ui.theme.*
16+
import com.smarttoolfactory.composematerialslider.ui.theme.Yellow400
1517
import com.smarttoolfactory.composematerialslider.ui.theme.brush.*
18+
import com.smarttoolfactory.composematerialslider.ui.theme.gradientColorScaleRGB
19+
import com.smarttoolfactory.composematerialslider.ui.theme.silverColors
1620
import com.smarttoolfactory.slider.ColorfulSlider
1721
import com.smarttoolfactory.slider.MaterialSliderDefaults
1822
import com.smarttoolfactory.slider.SliderBrushColor
@@ -138,7 +142,10 @@ fun SliderGradientDemo() {
138142
},
139143
colors = MaterialSliderDefaults.materialColors(
140144
thumbColor = SliderBrushColor(
141-
brush = Brush.sweepGradient(gradientColorScaleRGB, center = Offset(radius2, radius2)),
145+
brush = Brush.sweepGradient(
146+
gradientColorScaleRGB,
147+
center = Offset(radius2, radius2)
148+
),
142149
),
143150
activeTrackColor = SliderBrushColor(
144151
brush = sunsetGradient(),
@@ -155,7 +162,10 @@ fun SliderGradientDemo() {
155162
},
156163
colors = MaterialSliderDefaults.materialColors(
157164
thumbColor = SliderBrushColor(
158-
brush = Brush.sweepGradient(gradientColorScaleRGB, center = Offset(radius2, radius2)),
165+
brush = Brush.sweepGradient(
166+
gradientColorScaleRGB,
167+
center = Offset(radius2, radius2)
168+
),
159169
),
160170
activeTrackColor = SliderBrushColor(
161171
brush = sunriseGradient(),
@@ -176,5 +186,57 @@ fun SliderGradientDemo() {
176186
)
177187
)
178188
)
189+
190+
TitleText("Border gradients")
191+
var progress2 by remember { mutableStateOf(0f) }
192+
193+
ColorfulSlider(
194+
value = progress2,
195+
thumbRadius = 10.dp,
196+
trackHeight = 10.dp,
197+
onValueChange = { it ->
198+
progress2 = it
199+
},
200+
colors = MaterialSliderDefaults.materialColors(
201+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
202+
activeTrackColor = SliderBrushColor(
203+
brush = sunriseGradient(),
204+
)
205+
),
206+
borderStroke = BorderStroke(2.dp, sunriseGradient())
207+
)
208+
209+
ColorfulSlider(
210+
value = progress2,
211+
thumbRadius = 10.dp,
212+
trackHeight = 10.dp,
213+
onValueChange = { it ->
214+
progress2 = it
215+
},
216+
colors = MaterialSliderDefaults.materialColors(
217+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
218+
activeTrackColor = SliderBrushColor(
219+
brush = sunsetGradient(),
220+
)
221+
),
222+
borderStroke = BorderStroke(2.dp, sunsetGradient())
223+
)
224+
225+
ColorfulSlider(
226+
value = progress2,
227+
thumbRadius = 10.dp,
228+
trackHeight = 10.dp,
229+
onValueChange = { it ->
230+
progress2 = it
231+
},
232+
colors = MaterialSliderDefaults.materialColors(
233+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
234+
activeTrackColor = SliderBrushColor(
235+
brush = instaGradient(),
236+
)
237+
),
238+
borderStroke = BorderStroke(2.dp, instaGradient())
239+
)
240+
179241
}
180242
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ fun SliderPropertiesDemo() {
9999
var labelOffset by remember { mutableStateOf(Offset.Zero) }
100100

101101
var labelWidth by remember { mutableStateOf(0) }
102-
Text(text = "Price ${labelProgress.roundToInt()}",
102+
Text(text = "Price $${labelProgress.roundToInt()}",
103103
modifier = Modifier
104104
.offset {
105105
IntOffset(labelOffset.x.toInt() - labelWidth / 2, labelOffset.y.toInt())

0 commit comments

Comments
 (0)