Skip to content

Commit 2de2dd0

Browse files
authored
Merge pull request #2 from digital-detox/custom-track
add custom track
2 parents 9f4dbd5 + 1a233b8 commit 2de2dd0

File tree

2 files changed

+46
-19
lines changed

2 files changed

+46
-19
lines changed

MultiSlider.js

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
PanResponder,
66
View,
77
Platform,
8-
Dimensions,
98
I18nManager,
109
ImageBackground,
1110
} from 'react-native';
@@ -45,7 +44,8 @@ export default class MultiSlider extends React.Component {
4544
snapped: false,
4645
vertical: false,
4746
minMarkerOverlapDistance: 0,
48-
testID: undefined
47+
testID: undefined,
48+
renderTrack: undefined,
4949
};
5050

5151
constructor(props) {
@@ -380,6 +380,7 @@ export default class MultiSlider extends React.Component {
380380
sliderLength,
381381
markerOffsetX,
382382
markerOffsetY,
383+
renderTrack,
383384
} = this.props;
384385
const twoMarkers = this.props.values.length == 2; // when allowOverlap, positionTwo could be 0, identified as string '0' and throwing 'RawText 0 needs to be wrapped in <Text>' error
385386

@@ -432,23 +433,48 @@ export default class MultiSlider extends React.Component {
432433
const body = (
433434
<React.Fragment>
434435
<View style={[styles.fullTrack, { width: sliderLength }]}>
435-
<View
436-
style={[
437-
styles.track,
438-
this.props.trackStyle,
439-
trackOneStyle,
440-
{ width: trackOneLength },
441-
]}
442-
/>
443-
<View
444-
style={[
445-
styles.track,
446-
this.props.trackStyle,
447-
trackTwoStyle,
448-
{ width: trackTwoLength },
449-
]}
450-
{...(twoMarkers ? this._panResponderBetween.panHandlers : {})}
451-
/>
436+
{renderTrack ? (
437+
renderTrack({
438+
selectedStyle: !twoMarkers,
439+
style: [
440+
styles.track,
441+
this.props.trackStyle,
442+
trackOneStyle,
443+
{ width: trackOneLength },
444+
],
445+
})
446+
) : (
447+
<View
448+
style={[
449+
styles.track,
450+
this.props.trackStyle,
451+
trackOneStyle,
452+
{ width: trackOneLength },
453+
]}
454+
/>
455+
)}
456+
{renderTrack ? (
457+
renderTrack({
458+
selectedStyle: !!twoMarkers,
459+
style: [
460+
styles.track,
461+
this.props.trackStyle,
462+
trackTwoStyle,
463+
{ width: trackTwoLength },
464+
],
465+
...(twoMarkers ? this._panResponderBetween.panHandlers : {}),
466+
})
467+
) : (
468+
<View
469+
style={[
470+
styles.track,
471+
this.props.trackStyle,
472+
trackTwoStyle,
473+
{ width: trackTwoLength },
474+
]}
475+
{...(twoMarkers ? this._panResponderBetween.panHandlers : {})}
476+
/>
477+
)}
452478
{twoMarkers && (
453479
<View
454480
style={[

index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export interface MultiSliderProps {
7777
enableLabel?: boolean;
7878
vertical?: boolean;
7979
testID?: string;
80+
renderTrack?: ({ style: ViewStyle, selectedStyle: boolean }) => any;
8081
}
8182

8283
export default class MultiSlider extends React.Component<MultiSliderProps> {}

0 commit comments

Comments
 (0)