CODEWITHSUNDEEP
reactjsmaterial-ui
iamPavan
iamPavan

Reputation: 275

How to change the thumb icon of the material-ui slider

enter image description here

I would like to set the custom icon for the slider like in the above image.

Upvotes: 5

Views: 8547

Answers (2)

catie
catie

Reputation: 61

I was able to change it with simple css using the class from the MUI documentation:

.MuiSlider-thumb {
  background-image: url("./Images/arrow.svg");
}

Upvotes: 2

user11910739
user11910739

Reputation:

You can use AirbnbSlider where you can set the ThumbComponent to change the icon. https://material-ui.com/components/slider/#discrete-sliders

https://www.tutorialguruji.com/react-js/how-to-style-each-thumb-independently-when-material-ui-slider-have-multiple-thumbs/

function AirbnbThumbComponent(props) {
  return (
    <span {...props}>
      <span className="bar" />
      <span className="bar" />
      <span className="bar" />
    </span>
  );
}
...
...
<AirbnbSlider 
     ThumbComponent={AirbnbThumbComponent} 
     defaultValue={[20]} 
/>

Upvotes: 7

Related Questions