Как использовать компонент слайдера в пользовательском интерфейсе материалов?

Опубликовано: 15 Февраля, 2023

Ползунки позволяют пользователям делать выбор из диапазона значений. Материал UI для React имеет этот компонент, доступный для нас, и его очень легко интегрировать. Мы можем использовать компонент Slider в ReactJS, используя следующий подход:

Создание приложения React и установка модуля:

Шаг 1: Создайте приложение React с помощью следующей команды:

npx create-react-app foldername

Шаг 2: После создания папки проекта, т. е. имя папки , перейдите к ней с помощью следующей команды:

cd foldername

Шаг 3: После создания приложения ReactJS установите модули material-ui с помощью следующей команды:

npm install @mui/material
npm install @mui/icons-material

Структура проекта: Это будет выглядеть следующим образом.

Пример 1. В этом примере мы создадим простое приложение, использующее компонент Slider для выбора определенного значения в субъективном диапазоне значений. Обновите файл App.js, как показано ниже:

Имя файла: App.js

Javascript

import React from "react";
import { Grid, Slider, Typography } from "@mui/material";
import { VolumeDown, VolumeUp } from "@mui/icons-material";
  
const App = () => {
  
    // Our States
    const [value, setValue] = React.useState(10);
  
    // Changing State when volume increases/decreases
    const changeVolume = (event, newValue) => {
        setValue(newValue);
    };
  
    return (
        <div style={{
            margin: "auto",
            display: "block",
            width: "fit-content"
        }}>
            <h3>How to use Slider Component in ReactJS?</h3>
            <Typography id="continuous-slider" gutterBottom>
                Volume
            </Typography>
            <Grid container spacing={4}>
                <Grid item>
                    <VolumeDown />
                </Grid>
                <Grid item xs>
                    <Slider value={value}
                        onChange={changeVolume}
                    />
                </Grid>
                <Grid item>
                    <VolumeUp />
                </Grid>
            </Grid>
        </div>
    );
}
  
export default App;

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:

Пример 2. В этом примере мы создадим простое приложение, которое использует компонент Slider для выбора диапазона значений в субъективном диапазоне значений. Обновите файл App.js, как показано ниже:

Имя файла: App.js

Javascript

import React from "react";
import { Grid, Slider, Typography } from "@mui/material";
  
function valuetext(value) {
    return `${value}°C`;
}
  
const App = () => {
  
    const [value, setValue] = React.useState([20, 37]);
  
    const handleChange = (event, newValue) => {
        setValue(newValue);
    };
  
    return (
        <div style={{
            margin: "auto",
            display: "block",
            width: "fit-content"
        }}>
            <h3>How to use Slider Component in ReactJS?</h3>
            <Grid container spacing={4} mt={2}>
                <Slider
                    getAriaLabel={() => "Temperature range"}
                    value={value}
                    onChange={handleChange}
                    valueLabelDisplay="auto"
                    getAriaValueText={valuetext}
                />
            </Grid>
        </div>
    );
}
  
export default App;

Шаги для запуска приложения:

npm start

Выход:

Ссылка: https://mui.com/material-ui/react-slider/#main-content

JavaScript

Как использовать компонент слайдера в пользовательском интерфейсе материалов?

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ