How to Create Slider in React Application?

Introduction

In this article, we will learn how to create a Slider in React Application using Material UI.

Prerequisites of React

• Familiarity with the HTML, JavaScript.
• node.js installed
• Basic knowledge of React JS
• Visual Studio Code

Create React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

Open the newly created project in Visual Studio Code, and install Material-UI; run the following command in your React project's root directory.

npm install @material-ui/core

Now right-click on the src folder and create a new component named 'sliderdemo.js'. We will create a simple modal popup using material UI. Import the following component from Material UI in the sliderdemo.js file.

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';

Now, add the following code in the sliderdemo.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 Sliderdemo() {
  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>
  );
}

Now, import the sliderdemo component in the src/App.js file.

import './App.css';
import Sliderdemo from './sliderdemo'
function App() {
  return (
    <div className="App">
      <Sliderdemo/>
    </div>
  );
}

export default App;

Run the project using the 'npm start' command and check the result.

Summary

This article provides a step-by-step guide on creating sliders in React applications using the Material UI library.