Site icon RemoteStack

How to Build Slider Component in React with React Material UI

Sliders have been in user-interface existence for a very long yet primitive time. Sliders ideally provide greater UI control when it comes to choosing a value or a range of values.

In this post, you will see and unconditionally understand how to create different types of slider components in React js using the React material UI package.

You will get started with setting up a new React project along with React MUI configuration in React environment. Then, we will move on to some helpful customization of the slider component in React.

A slider is typically used when a specific value comes between a minimum or maximum value. One of the most generic usage of slider modules is for audio volume or updating screen brightness in apps.

Setting Up React Project

Here is the command to form a new React project. Notice that we must set up node and npm on our system.

npx create-react-app react-blog

Setting Up Material UI in React

Our project is ready, but we don’t have React MUI setup yet.

Therefore, we mentioned a command below; you have to run that command to add the React MUI library to your project.

npm install @mui/material @emotion/react @emotion/styled @fontsource/roboto

If you open the App.css file, here you have to register the font modules as given below.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

We are now ready to take full advantage of React MUI modules.

Build New Component

Create the features folder somewhere inside the src/ folder. Make sure to make the Home.js file.

You have created the basic function component where we will create the slider module.

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Build Basic Slider

In our first example, we will create a basic continuous slider. A continuous slider lets users choose a value along a subjective range.

Put following code to the features/Home.js file.

import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Slider from '@mui/material/Slider';
import VolumeDown from '@mui/icons-material/VolumeDown';
import VolumeUp from '@mui/icons-material/VolumeUp';

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

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: 200 }}>
      <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
        <VolumeDown />
        <Slider aria-label="Volume" value={value} onChange={handleChange} />
        <VolumeUp />
      </Stack>
      <Slider disabled defaultValue={30} aria-label="Disabled slider" />
    </Box>
  );
}

Change Slider Size

The prop size=”small” property allows you to customize the slider size; here is the code example that can help you change the slider size in React.

import * as React from 'react';
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

export default function Home() {
  return (
    <Box width={300}>
      <Slider
        size="small"
        defaultValue={70}
        aria-label="Small"
        valueLabelDisplay="auto"
      />
      <Slider defaultValue={50} aria-label="Default" valueLabelDisplay="auto" />
    </Box>
  );
}

Slider with Custom Marks

Here is an easy way to add custom marks to the slider. It adds a rich array to the marks prop.

import * as React from 'react';
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

const marks = [
  {
    value: 0,
    label: '0°C',
  },
  {
    value: 20,
    label: '20°C',
  },
  {
    value: 37,
    label: '37°C',
  },
  {
    value: 100,
    label: '100°C',
  },
];

function valuetext(value) {
  return `${value}°C`;
}

export default function Home() {
  return (
    <Box sx={{ width: 300 }}>
      <Slider
        aria-label="Custom marks"
        defaultValue={20}
        getAriaValueText={valuetext}
        step={10}
        valueLabelDisplay="auto"
        marks={marks}
      />
    </Box>
  );
}

Register Home Component

Lastly, we need to move into the App.js file. Here in this global component you have to inject your home component so that it could be serve on the browser.

import React from "react";
import Home from "./features/Home";

function App() {
  return (
    <div>
      <h2>React Material UI Slider Component Example</h2>
      <Home />
    </div>
  );
}

export default App;

Run React Server

You have to start the React app on the browser; there, we can see the slider component in action.

npm start

Exit mobile version