Material-ui: Setting Color for Slider

[josephmartin09]

Hello, I am unable to pass color through the style prop for the Slider component. It also cannot see how to set it through the theme, it always is the color of the default primary theme.

[lukewendling]

+1 Same for me

[nalnaji]

I've been trying the following, but ripple isn't even showing. Also handleFillColor isn't making any changes either :(

  componentWillMount() {
    ThemeManager.setComponentThemes({
      slider: {
        selectionColor: "#00A2DF",
        rippleColor: "#00A2DF",
      },
    });
  }

[shaurya947]

Hmm, that's strange. I would expect that work. @nalnaji just to make sure, you have declared the muiTheme key in your childContextTypes, and you are returning

muiTheme: ThemeManager.getCurrentTheme()

in your getChildContext() function right?

Anyway, we are changing themes a little in v0.12 which is right around the corner and I can verify that these overrides work in v0.12. Nevertheless, slider component takes the following theme properties:

• handleColorZero: the color of the handle border and the ripple around the handle when the slider is at 0
• handleFillColor: the actual fill color of the handle when the slider is at 0
• selectionColor: the fill of the segment to the left of the handle and the handle when the slider is greater than 0.
• rippleColor: the color of the ripple around the handle when the slider is greater than 0.

Hope that helps!

[jdelafon]

Why does selectionColor include the handle ? As it is there is no way to have the segment and the handle with a different color when the slider value is > 0.

(v0.15.2)

[rhoman]

Hi,

did you manage to have handle in different color then track?

[jdelafon]

No.

[amaroyche]

@jdelafon As a quick and dirty fix you can assign class to Slider and than target first part of slider track.

<Slider className="slider-control" />

.slider-control div div div:first-child {
    background-color: gray !important;
}

this allows me to use selectionColor for handle only,
hope it helps

[acroyear]

I filed a new bug (which they may just close again) here - https://github.com/callemall/material-ui/issues/6127

However, I left a comment on a workaround with some sample code: create a new theme localized to just the slider itself.