CODEWITHSUNDEEP
material-ui
willemx
willemx

Reputation: 550

How to style the material-ui slider

I would like to set the colors of various parts of the slider, the handle and both parts of the track: before and after the handle. Or better still: make the slider invisible (but still working) so I can paint something myself based on the slider value...

I don't think the currently available style-property enables me to do this ?

Upvotes: 1

Views: 9381

Answers (1)

André Junges
André Junges

Reputation: 5367

You're right, you can't do this just using the style property.

However you can change it's colors customizing the mui theme. http://www.material-ui.com/v0.15.0-alpha.2/#/customization/themes

Example:

import React from 'react';
import Slider from 'material-ui/Slider';
import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

const muiTheme = getMuiTheme({
  slider: {
    trackColor: 'yellow',
    selectionColor: 'green'
  },
});

const SliderExample = () => (
  <div>
    <MuiThemeProvider muiTheme={muiTheme}>
        <Slider />
    </MuiThemeProvider>
  </div>
);

export default SliderExampleSimple

Note: The handle will have the same color as the line before it..(selectionColor)

Upvotes: 5

Related Questions