instea / react-native-color-picker

Color picker component for IOS/Android
Apache License 2.0
272 stars 67 forks source link

Change Slider Colors #48

Closed Jake-Mulhern closed 1 year ago

Jake-Mulhern commented 1 year ago

How would I, if possible, change the color of the sliders? I have imported the Slider component from react-native-community/slider and passed it in as a prop but don't know how to pass props like slider color to the slider this way.

<ColorPicker
       sliderComponent={Slider}
       onColorSelected={color => alert(`Color selected: ${color}`)}
       onColorChange={color => setNewPaletteColor(fromHsv(color))}
       style={{ flex: 1, height: 400, width: 300 }}
       defaultColor={Constants['collectionData']['fields']['palette']['mapValue']['fields'][colorToChange]['stringValue']}
/>
Jake-Mulhern commented 1 year ago

I managed to figure this out.

I created a function:

const renderSlider = () => {
  return (<Slider minimumTrackTintColor={theme.colors.medium} />
}

and then passed that to the ColorPicker component

<ColorPicker
                  sliderComponent={renderSliderComponent}
                  onColorSelected={color => alert(`Color selected: ${color}`)}
                  onColorChange={color => setNewPaletteColor(fromHsv(color))}
                  style={{ flex: 1, height: 400, width: 300 }}
                  defaultColor={selectedColor}
                />