[Slider] should support setting colors not in the theme

[acroyear]

Problem description

The style and sliderStyle properties in Slider don't actually affect the slider colors. They create a background-color box but the component colors remain unchanged from the ancestor theme. This is not a useful thing.

There are use-cases for needing to easily change the color, just like one can change an icon or fab color, without going through all the details of creating a new mui-theme just to wrap the slider.

Workarounds involving CSS aren't dynamic because the CSS is only loaded once. Workarounds involving finding the relevant divs and setting their colors don't work on the "knob" of the slider because the div is re-rendered, so the style (somehow) needs to be re-applied on every value change.

Thus, the only consistent workaround is to create a new dynamic theme just for the color change here, which seems to be a lot of code for such a little need.

Versions

• Material-UI: 0.16.7

[acroyear]

Well, not a lot of code for the user, but a bit of execution code creating the alt theme. (I originally posted that it didn't work, but I'd not structured the alt theme correctly, so removed that as being my fault).

put this in your own theme file

export var replaceSliderTheme = function(posColor, negColor) {
  console.log("replace", posColor, negColor);
  var rv = {
    spacing: spacing,
    fontFamily: 'Roboto, sans-serif',
    palette: {
      primary1Color: posColor,
      accent1Color: posColor,
      disabledColor: negColor || fade(fullWhite, 0.3),
      // (and rest of the colors being your original theme
    }
  }
  return rv;
}

then call it by

const sliderTheme = replaceSliderTheme(myAltColor);

and

<MuiThemeProvider muiTheme={getMuiTheme(sliderTheme)}> <Slider /> </MuiThemeProvider>

so having a more direct mechanism would be nice, but this workaround suits my purposes without having to style-hack the divs.

[dehjli85]

being able to just pass a prop to the Slider component to change the color would be ideal.

[oliviertassinari]

We plan on migrating the component to the v1-beta branch. I'm closing the issue for #4793.

[acroyear]

Heh - I hadn't realized the slider wasn't in "@next" yet. Is there a timetable on that because I'm gonna need it somewhat soon (working on a rewrite of a music player). :)

[acroyear]

anyways, theme creation doesn't seem as heavyweight as i thought it would be, so if changing the theme instead of just passing in a property is the way to do it still, I'll be ok with that...but having properties certainly makes it easier.