instea / react-native-color-picker

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

How to label the sliders #49

Open Jake-Mulhern opened 1 year ago

Jake-Mulhern commented 1 year ago

I would like to label each of the sliders so that users can tell what each one controls.

How would I do this so that I can change the text that appears above each individual slider? Here is my code so far.

<ColorPicker
      sliderComponent={renderSliderComponent}
      onColorSelected={color => alert(`Color selected: ${color}`)}
      onColorChange={color => setNewPaletteColor(fromHsv(color))}
      style={{ flex: 1, height: 400, width: 300 }}
      defaultColor={selectedColor}
/>
const renderSliderComponent = () => {
    return (
      <View>
        <Text>Testing</Text>
        <Slider 
          minimumTrackTintColor={theme.colors.medium}
        />
      </View>
    )
  }
sodik82 commented 1 year ago

I guess there is no straight-forward solution. But you can still use hideSliders=true and render the sliders yourself and use controlled version of the component.