Material-UI Sliders

We’ve used the ThemeProvider from the Material-UI package, to override and restyle their Slider component. And here is how it looks.

Regular

Copy

import React from "react";
// @material-ui/core components
import Slider from '@material-ui/core/Slider';
// @material-ui/icons components

function Example() {
  return (
    <>
      <Slider />
    </>
  );
}

export default Example;

Double

Copy

import React from "react";
// @material-ui/core components
import Slider from "@material-ui/core/Slider";
// @material-ui/icons components

function Example() {
  return (
    <>
      <Slider defaultValue={[20, 80]} />
    </>
  );
}

export default Example;