Material-ui: Cannot change slider color

[natashache]

Problem description

Followed the "customizing the theme" instruction on material-ui doc to change the slider color. But it had no effect at all. And I didn't get any error message.

Code

import Slider from 'material-ui/Slider'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme from 'material-ui/styles/getMuiTheme'

const muiTheme = getMuiTheme({
  palette: {
    selectionColor: '#F76B1C',
    handleFillColor: '#F76B1C'
  },
})

//and then in the render function:
      <MuiThemeProvider muiTheme={muiTheme}>
           <Slider value={currentPercent} min={0} max={100} sliderStyle={{margin:'0px', padding: '0px', width: '100%'}}/>
      </MuiThemeProvider>

Versions

• Material-UI: 0.17.1
• React: 15.4.2

Anybody has an idea what's going on? Thanks.

[Floriferous]

Hi @natashache,

The palette object modifies the whole theme, without specifying a component. The selectionColor and handleFillColor can only be changed in the slider object. Here (broken link, see my comment below) is a list with all the possible modifications.

So this is what you should do:

const muiTheme = getMuiTheme({
  slider: {
    selectionColor: '#F76B1C',
    handleFillColor: '#F76B1C'
  }
});

Make sure to post your message on stack overflow if you can :)

EDIT: Mark link as broken

[natashache]

@Floriferous Thank you so much! It worked. Ok, will make sure I use stackoverflow instead in the future.

[eliranamar]

@Floriferous Thanks for the tip! did you find the same list for v1 / material-ui@next?

[bkentdev]

@Floriferous Just a heads-up your link of possible values is broken

[Floriferous]

@grizzletech The way color overrides work is now a bit different indeed, you have to use theme overrides: https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type

Here are the possible overrides for the Slider (currently still in beta): https://material-ui.com/lab/api/slider/#css-api

Here's how you would do it:

import createMuiTheme from '@material-ui/core/styles/createMuiTheme';

const myCustomMuiTheme = createMuiTheme({
  ...
  overrides: {
    MuiSlider: {
      track: { backgroundColor: 'red' },
      thumb: { backgroundColor: 'red' },
    },
  }
  ...
});