Skip to content

Commit efe1441

Browse files
SmartToolFactorySmartToolFactory
committed
Update README.md
1 parent 8243fbd commit efe1441

File tree

1 file changed

+233
-11
lines changed

1 file changed

+233
-11
lines changed

‎README.md‎

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

6-
| Dimensions | Properties | Icon | SliderLabel | Gradient1 |
7-
| ----------|-----------| -----------| -----------|
8-
| <img src="./screenshots/slider_dimensions.png"/> | <img src="./screenshots/slider_properties.png"/> | <img src="./screenshots/slider_icons.png"/> | <img src="./screenshots/slider_labels.png"/> | <img src="./screenshots/slider_gradient.png"/> |
3+
Colorful sliders that can have Solid or Gradient colors for thumb or track which can have thumb and
4+
track with varying sizes, borders with solid or gradient colors. And Sliders with emojis, or custom
5+
Composables like **Icon**.
96

7+
|Dimensions | Properties | Slider with Icon | Slider with Label | Gradient |
8+
| ----------|-----------| -----------| -----------| -----------|
9+
| <img src="./screenshots/slider_dimensions.png"/> | <img src="./screenshots/slider_properties.png"/> | <img src="./screenshots/slider_icons.png"/> | <img src="./screenshots/slider_labels.png"/> | <img src="./screenshots/slider_gradient.png"/> |
1010

1111
### ColorfulSlider
12-
Sliders that can use Color or gradient for track, thumb, or tick colors with custom
13-
thumb and track heights.
12+
13+
Sliders that can use Color or gradient for track, thumb, or tick colors with custom thumb and track
14+
heights.
15+
16+
```
17+
@Composable
18+
fun ColorfulSlider(
19+
value: Float,
20+
onValueChange: (Float) -> Unit,
21+
modifier: Modifier = Modifier,
22+
enabled: Boolean = true,
23+
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
24+
steps: Int = 0,
25+
onValueChangeFinished: (() -> Unit)? = null,
26+
trackHeight: Dp = TrackHeight,
27+
thumbRadius: Dp = ThumbRadius,
28+
colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),
29+
borderStroke: BorderStroke? = null,
30+
drawInactiveTrack: Boolean = true,
31+
coerceThumbInTrack: Boolean = false
32+
)
33+
```
34+
35+
And one that returns thumb position as `Offset`
36+
37+
```
38+
fun ColorfulSlider(
39+
value: Float,
40+
onValueChange: (Float, Offset) -> Unit,
41+
modifier: Modifier = Modifier,
42+
enabled: Boolean = true,
43+
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
44+
steps: Int = 0,
45+
onValueChangeFinished: (() -> Unit)? = null,
46+
trackHeight: Dp = TrackHeight,
47+
thumbRadius: Dp = ThumbRadius,
48+
colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),
49+
borderStroke: BorderStroke? = null,
50+
drawInactiveTrack: Boolean = true,
51+
coerceThumbInTrack: Boolean = false
52+
)
53+
```
54+
55+
* **value** current value of the Slider. If outside of **valueRange** provided, value will be
56+
**coerced** to this range.
57+
* **onValueChange** lambda that returns value, position of **thumb** as **Offset**, vertical center
58+
is stored in y.
59+
* **modifier** modifiers for the Slider layout
60+
* **enabled** whether or not component is enabled and can be interacted with or not
61+
* **valueRange** range of values that Slider value can take. Passed value will be coerced to this
62+
range
63+
* **steps** if greater than 0, specifies the amounts of discrete values, evenly distributed between
64+
across the whole value range. If 0, slider will behave as a continuous slider and allow to choose
65+
any value from the range specified. Must not be negative.
66+
* **trackHeight** height of the track that will be drawn on Canvas. half of trackHeight is used
67+
as **stroke** width.
68+
* **thumbRadius** radius of thumb of the the slider
69+
* **colors** MaterialSliderColors** that will be used to determine the color of the Slider parts in
70+
different state. See **MaterialSliderDefaults.defaultColors**, **
71+
MaterialSliderDefaults.customColors** or other functions to customize.
72+
* **borderStroke** draws border around the track with given width in dp.
73+
* **drawInactiveTrack** flag to draw **InActive** track between active progress and track end.
74+
* **coerceThumbInTrack** when set to true track's start position is matched to thumbs left on start
75+
and thumbs right at the end of the track. Use this when **trackHeight** is bigger than **
76+
thumbRadius**.
77+
78+
Usage
79+
80+
```
81+
ColorfulSlider(
82+
value = progress2,
83+
thumbRadius = 10.dp,
84+
trackHeight = 10.dp,
85+
onValueChange = { it ->
86+
progress2 = it
87+
},
88+
colors = MaterialSliderDefaults.materialColors(
89+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
90+
activeTrackColor = SliderBrushColor(
91+
brush = sunriseGradient(),
92+
)
93+
),
94+
borderStroke = BorderStroke(2.dp, sunriseGradient())
95+
)
96+
```
97+
98+
`SliderBrushColor` is a data class which can be used to set color or brush for any color property
99+
100+
```
101+
102+
/**
103+
* Data class that contains color or/and brush property for drawing track section of
104+
* [ColorfulSlider]
105+
*/
106+
data class SliderBrushColor(
107+
val color: Color = Color.Unspecified,
108+
val brush: Brush? = null
109+
) {
110+
/**
111+
* [Brush] that is not **null** [brush] property or [SolidColor] that is not nullable and
112+
* contains [color] property as [SolidColor.value]
113+
*/
114+
val activeBrush: Brush
115+
get() = brush ?: solidColor
116+
117+
/**
118+
* [SolidColor] is a [Brush] that
119+
* wraps [color] property that is used for [activeBrush] if [brush] property is **null**
120+
*/
121+
val solidColor = SolidColor(color)
122+
}
123+
```
14124

15125
### SliderWithLabel
126+
16127
Sliders that can move a label above the Slider and display progress
17128

18-
### IconSlider
19-
Sliders that can use any Composable for thumb and use Color or gradient for track, thumb, or tick colors with custom
20-
thumb and track heights.
129+
```
130+
fun SliderWithLabel(
131+
value: Float,
132+
onValueChange: (Float) -> Unit,
133+
modifier: Modifier = Modifier,
134+
enabled: Boolean = true,
135+
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
136+
steps: Int = 0,
137+
onValueChangeFinished: (() -> Unit)? = null,
138+
trackHeight: Dp = TrackHeight,
139+
thumbRadius: Dp = ThumbRadius,
140+
colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),
141+
borderStroke: BorderStroke? = null,
142+
drawInactiveTrack: Boolean = true,
143+
coerceThumbInTrack: Boolean = false,
144+
labelPosition: LabelPosition = LabelPosition.Top,
145+
yOffset: Dp = 0.dp,
146+
label: @Composable () -> Unit = {}
147+
)
148+
```
149+
150+
Usage
151+
152+
```
153+
SliderWithLabel(
154+
value = labelProgress,
155+
onValueChange = {
156+
labelProgress = it
157+
},
158+
thumbRadius = 10.dp,
159+
trackHeight = 10.dp,
160+
valueRange = 0f..100f,
161+
colors = MaterialSliderDefaults.materialColors(),
162+
labelPosition = LabelPosition.Bottom,
163+
label = {
164+
Text(
165+
text = "$${labelProgress.roundToInt()}",
166+
modifier = Modifier
167+
.shadow(1.dp, shape = CircleShape)
168+
.background(Brown400, shape = CircleShape)
169+
.padding(5.dp),
170+
color = Color.White
171+
)
172+
}
173+
)
174+
```
175+
176+
### ColorfulIconSlider
177+
178+
Sliders that can use any Composable for thumb and use Color or gradient for track, thumb, or tick
179+
colors with custom thumb and track heights.
180+
181+
```
182+
fun ColorfulIconSlider(
183+
modifier: Modifier = Modifier,
184+
value: Float,
185+
onValueChange: (Float, Offset) -> Unit,
186+
enabled: Boolean = true,
187+
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
188+
steps: Int = 0,
189+
onValueChangeFinished: (() -> Unit)? = null,
190+
trackHeight: Dp = TrackHeight,
191+
colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),
192+
borderStroke: BorderStroke? = null,
193+
drawInactiveTrack: Boolean = true,
194+
coerceThumbInTrack: Boolean = false,
195+
thumb: @Composable () -> Unit
196+
)
197+
```
198+
199+
Usage
200+
201+
```
202+
ColorfulIconSlider(
203+
value = progress,
204+
onValueChange = { value, offset ->
205+
progress = value
206+
},
207+
trackHeight = 14.dp,
208+
colors = MaterialSliderDefaults.materialColors(
209+
activeTrackColor = SliderBrushColor(color = Blue400),
210+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
211+
),
212+
borderStroke = BorderStroke(1.dp, Blue400)
213+
) {
214+
Text(text = "👍", fontSize = 40.sp, color = Color.Black)
215+
}
216+
```
217+
218+
or
219+
220+
```
221+
ColorfulIconSlider(
222+
value = progress,
223+
onValueChange = { value, offset ->
224+
progress = value
225+
},
226+
trackHeight = 10.dp,
227+
colors = MaterialSliderDefaults.materialColors(
228+
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
229+
activeTrackColor = SliderBrushColor(
230+
brush = instaGradient(),
231+
)
232+
),
233+
borderStroke = BorderStroke(2.dp, instaGradient())
234+
) {
235+
Image(
236+
painter = painterResource(id = R.drawable.stf),
237+
contentDescription = null,
238+
modifier = Modifier.size(40.dp)
239+
)
240+
}
241+
}
242+
```

0 commit comments

Comments
 (0)