Material UI — Slider

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add sliders with Material UI.

Discrete Sliders

We can add sliders to snaps to discrete values.

To do that, we set the marks prop to true .

For instance, we can write:

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

export default function App() {
  return (
    <form>
      <Slider marks />
    </form>
  );
}

to make an uncontrolled slider that snaps to the nearest 10.

Small Steps

We can change the steps with the steps prop.

For example, we can write:

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

export default function App() {
  return (
    <form>
      <Slider step={0.00001} marks />
    </form>
  );
}

to change the increment between each discrete value.

Custom Marks

We can add our own custom marks with the marks prop.

For example, we can write:

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

const marks = [
  {
    value: 0,
    label: "0m"
  },
  {
    value: 25,
    label: "25m"
  },
  {
    value: 50,
    label: "50m"
  },
  {
    value: 75,
    label: "75m"
  },
  {
    value: 100,
    label: "100m"
  }
];

export default function App() {
  return (
    <form>
      <Slider step={10} marks={marks} valueLabelDisplay="auto" />
    </form>
  );
}

We add the marks array with the value and label properties in each entry to show the labels with the text in the label property.

Restricted Values

We can restrict values to the ones that are in the marks array by setting step to null .

For example, we can write:

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

const marks = [
  {
    value: 0,
    label: "0m"
  },
  {
    value: 25,
    label: "25m"
  },
  {
    value: 50,
    label: "50m"
  },
  {
    value: 75,
    label: "75m"
  },
  {
    value: 100,
    label: "100m"
  }
];

export default function App() {
  return (
    <form>
      <Slider step={null} marks={marks} valueLabelDisplay="auto" />
    </form>
  );
}

Now we can only select the values that are marked in the marks array because of the null value we passed into the step prop.

Make Label Always Visible

We can make the labels always visible by setting the valueLabelDisplay prop to on .

For example, we can write:

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

const marks = [
  {
    value: 0,
    label: "0m"
  },
  {
    value: 25,
    label: "25m"
  },
  {
    value: 50,
    label: "50m"
  },
  {
    value: 75,
    label: "75m"
  },
  {
    value: 100,
    label: "100m"
  }
];

export default function App() {
  return (
    <form>
      <Slider step={10} valueLabelDisplay="on" marks={marks} />
    </form>
  );
}

Now we see the value above the slider dot.

Range Slider

We can allow users to select a value range with the Slider .

To do that, we can set an array as the value as the initial value.

For example, we can write:

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

export default function App() {
  const [value, setValue] = React.useState([20, 30]);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <form>
      <Slider valueLabelDisplay="auto" value={value} onChange={handleChange} />
    </form>
  );
}

to make a range slider.

We set an array as the initial value of the value state to make the slider a range slider.

Vertical Sliders

We can make a slider vertical with the orientation prop set to vertical .

For instance, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";

const useStyles = makeStyles({
  root: {
    height: 300
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Slider
        orientation="vertical"
        valueLabelDisplay="auto"
        defaultValue={30}
      />
    </div>
  );
}

to create a vertical slider.

We’ve to set the height of the wrapper so that the slider is displayed.

Track

We can set track to false to remove the track that’s displayed when we select a value.

To do that, we write:

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

export default function App() {
  return (
    <div>
      <Slider track={false} defaultValue={30} />
    </div>
  );
}

to remove th track.

We can also set it to inverted to change the track to be opposite of the default.

Non-Linear Scale

The scale is linear by default, but we can change it to a nonlinear scale with the scale prop set to a function.

We can write:

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

export default function App() {
  return (
    <div>
      <Slider scale={x => x ** 5} defaultValue={30} />
    </div>
  );
}

to change the scale.

Conclusion

We can add sliders to let users select a number or a range of numbers from a slider.