Skip to content

Commit

Permalink
Fix slider steps for min/max. Add label styles. Fix label height.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgillick
jgillick committed Oct 19, 2023
1 parent 790d87e commit d7749d4
Show file tree
Hide file tree
Showing 8 changed files with 1,416 additions and 1,394 deletions.
23 changes: 13 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,19 @@ function Example() {
| values | [0] | `number[]` | The initial values of the sliders. If the array has two values, there will be two slider markers |
| min | | `number` | The minimum value of the slider scale |
| max | | `number` | The max value of the slider scale |
| increment | 1 | `number` | If `min` and `max` are defined, this is the increment between slider steps. |
| sliderValues | | `number[]` | Hardcode the slider step values. If this is used, `min` and `max` are ignored. |
| markerColor | `#333333` | 'string' | The hex color to use for the slider marker thumb. |
| trackStyle | | `ViewStyle` | A style to apply to the slider track. |
| selectedTrackStyle | | `ViewStyle` | A style to apply to the selected section of the slider track. |
| showLabel | `true` | `boolean` | Show the floating marker label over the marker thumb. |
| onChange | | (values) => void | Fired when the slider value changes. |
| onSlidingStart | | (type) => void | Fired when one of the markers starts to be dragged. |
| onSlidingComplete | | (type) => void | Fired when one of the markers finishes being dragged. |
| labelComponent | [`src/Label`](./src/Label.tsx) | Component | The component used for the floating marker label. |
| increment | 1 | `number` | If `min` and `max` are defined, this is the increment between slider steps |
| sliderValues | | `number[]` | Hardcode the slider step values. If this is used, `min` and `max` are ignored |
| markerColor | `#333333` | 'string' | The hex color to use for the slider marker thumb |
| style | | `ViewStyle` | The style to apply to the slider container |
| trackStyle | | `ViewStyle` | The style to apply to the slider track |
| labelStyle | | `ViewStyle` | The style to apply to the floating label |
| labelTextStyle | | `ViewStyle` | The style to apply to the floating label text |
| selectedTrackStyle | | `ViewStyle` | The style to apply to the selected section of the slider track |
| showLabel | `true` | `boolean` | Show the floating marker label over the slider marker |
| onChange | | (values) => void | Fired when the slider value changes |
| onSlidingStart | | (type) => void | Fired when one of the markers starts to be dragged |
| onSlidingComplete | | (type) => void | Fired when one of the markers finishes being dragged |
| labelComponent | [`src/Label`](./src/Label.tsx) | Component | The component used for the floating marker label |
| markerComponent | [`srv/Marker`](./src/Marker.tsx) | Component | The component used for the marker thumb. Note, this needs to have a static `size` property. (see below) |
| setA11yMarkerProps | | Function | Customize the accessibility values (see below) |
| hitSlop | | [Insets](https://reactnative.dev/docs/view#hitslop) | Defines how far a touch event can start away from the marker |
Expand Down
71 changes: 65 additions & 6 deletions example/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,41 @@
import React, { useMemo } from "react";
import React, { useCallback, useState, useMemo } from "react";
import { StyleSheet, Text, View, SafeAreaView, ScrollView } from "react-native";
import Slider, { MarkerType } from "react-native-a11y-slider";

export default function App() {
return (
<SafeAreaView style={styles.container}>
<ScrollView contentContainerStyle={styles.scroller}>
const [scrollEnabled, setScrollEnabled] = useState(true);

// Disable the view scrolling when the slider is being dragged.
const sliderStart = useCallback(() => {
setScrollEnabled(false);
}, []);
const sliderStop = useCallback(() => {
setScrollEnabled(true);
}, []);

// Memoize the sliders so that they don't re-render when scrollEnabled changes
const scrollers = useMemo(() => {
return (
<>
<View style={styles.example}>
<Text>Basic single slider</Text>
<Slider min={1} max={100} values={[10]} />
<Slider
min={1}
max={100}
values={[5]}
onSlidingStart={sliderStart}
onSlidingComplete={sliderStop}
/>
</View>
<View style={styles.example}>
<Text>Double slider</Text>
<Slider min={1} max={100} values={[10, 70]} />
<Slider
min={1}
max={100}
values={[10, 70]}
onSlidingStart={sliderStart}
onSlidingComplete={sliderStop}
/>
</View>
<View style={styles.example}>
<Text>Custom stop values</Text>
Expand Down Expand Up @@ -46,6 +69,8 @@ export default function App() {
"Y",
"Z",
]}
onSlidingStart={sliderStart}
onSlidingComplete={sliderStop}
/>
</View>
<View style={styles.example}>
Expand All @@ -55,8 +80,33 @@ export default function App() {
max={100}
values={[20, 55]}
markerComponent={CustomMarker}
onSlidingStart={sliderStart}
onSlidingComplete={sliderStop}
/>
</View>
<View style={styles.example}>
<Text>Custom Label Styles</Text>
<Slider
min={1}
max={100}
values={[5]}
labelStyle={styles.labelStyle}
labelTextStyle={styles.labelTextStyle}
onSlidingStart={sliderStart}
onSlidingComplete={sliderStop}
/>
</View>
</>
);
}, [sliderStart, sliderStop]);

return (
<SafeAreaView style={styles.container}>
<ScrollView
contentContainerStyle={styles.scroller}
scrollEnabled={scrollEnabled}
>
{scrollers}
</ScrollView>
</SafeAreaView>
);
Expand Down Expand Up @@ -95,4 +145,13 @@ const styles = StyleSheet.create({
borderColor: "#666",
padding: 10,
},
labelStyle: {
backgroundColor: "#000",
borderRadius: 5,
},
labelTextStyle: {
fontSize: 16,
fontStyle: "italic",
color: "#fff",
},
});
Loading

0 comments on commit d7749d4

Please sign in to comment.