Как выровнять метку вправо в вертикальном слайдере MUI в ReactJS?
Я использую ReactJS/TS с MUI (Material-UI), и мне нужно реализовать вертикальный ползунок, при котором метка поворачивается вправо. По умолчанию в MUI метка находится слева при использовании вертикального ползунка. Я просмотрел документацию по API, но не смог найти способа настроить отображение метки справа, а не слева.
Я попробовал использовать собственную метку, но в ней используется компонент всплывающей подсказки, который при сильном перетаскивании выглядит не очень хорошо. Подсказка заставляет метку мерцать, поскольку она часто перерисовывается.
Вот изображение текущей настройки слайдера:
Как настроить метку так, чтобы она располагалась справа, чтобы не было проблемы с мерцанием?
песочница для кода https://25k7jg.csb.app/
код:
import React from "react";
import "./styles.css";
import Slider from "@mui/material/Slider";
const minDistance = 1;
export default function App() {
const [value1, setValue1] = React.useState<number[]>([20, 37]);
const handleChangeEvent1 = (
event: Event,
newValue: number | number[],
activeThumb: number
) => {
if (!Array.isArray(newValue)) {
return;
}
if (activeThumb === 0) {
setValue1([Math.min(newValue[0], value1[1] - minDistance), value1[1]]);
} else {
setValue1([value1[0], Math.max(newValue[1], value1[0] + minDistance)]);
}
};
return (
<div style = {{ paddingTop: "20px", height: "500px" }} className = "App">
<Slider
orientation = "vertical"
value = {value1}
step = {0.1}
onChange = {handleChangeEvent1}
valueLabelDisplay = "auto"
disableSwap
/>
</div>
);
}
Спасибо за вашу помощь!
Это очень хорошо! Большое спасибо! @OnurDoğan, но как бы ты изменил стрелку всплывающей подсказки на прямую, как если бы она выходила из пули ползунка? В вашем примере оно направлено вниз, а не в направлении пули.
Пожалуйста, по умолчанию это было так, поэтому я не обновлял его, но если мы хотим его обновить, нужно обновить MuiSlider-valueLabel::before. По умолчанию было left: 50%, bottom: 0%. Я изменил его на bottom: 50%, left: 0, и стрелка переместилась влево. Вы можете просмотреть его по той же ссылке, я только что обновил его: stackblitz.com/edit/react-nxzqnv-qp3hcd?file=demo.tsx,index.css. Вероятно, это bottom: 50%, left: 100% в вашем случае
ты знаешь как убрать мерцание? для шага = {0.1} я попробовал использовать `` font-variant-numeric: tabular-nums;``, но не сработало
@OnurDoğan, эй, ты знаешь, как решить проблему мерцания для шага = {0.1}? Я пробовал с font-variant-numeric: tabular-nums;, но безуспешно
Я только что обновил ту же ссылку: stackblitz.com/edit/react-nxzqnv-qp3hcd?file=demo.tsx,index.css, это то, что вам нужно?
ок, чат, gpt сказал добавить valueLabelFormat = {value => value.toFixed(1)} // Always show one decimal place , чтобы оно оставалось десятичным числом, большое спасибо @OnurDoğan, можете ли вы поддержать мой вопрос, пожалуйста?
и добавь ответ для будущих людей
Пожалуйста, @dolev-dublon, рад быть полезным. Конечно, это хороший вопрос, и в нем есть ответы на некоторые другие связанные вещи. Это может быть полезно и для кого-то еще, поэтому я добавил несколько ссылок с объяснением исправлений.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Для управления положением метки мы можем переопределить свойства CSS left и top для класса MuiSlider-valueLabel примерно так (лучше настроить его с помощью стилей MUI):
.MuiSlider-valueLabel {
left: 30px;
top: 25px;
padding: 5px 20px;
}
С другой стороны, если вы хотите изменить стиль значка стрелки подсказки, необходимо переопределить некоторые свойства MuiSlider-valueLabel::before
Например, в моем случае его свойства CSS по умолчанию были left: 50%, bottom: 0, и они отображались с выравниванием по нижнему краю. Если мы хотим, чтобы он отображался с выравниванием по левой стороне, необходимо изменить стили CSS, например (лучше настроить его с помощью стилей MUI):
.MuiSlider-valueLabel::before {
bottom: 50%;
left: 0;
}
Я также создал ДЕМО-ССЫЛКУ, чтобы легко просмотреть и протестировать ее.
Надеюсь, понятно и полезно
эй, онур, ты знаешь, как решить проблему с индексом z?
Я добавил изображение в вопрос
Вы можете добавить z-index: 2 для MuiSlider-valueLabel и z-index: 1 для метки компонента таблицы, это может сработать, но не уверен. Нужно видеть код компонентов на изображении. Я думаю, вы можете создать для этого новый вопрос
Вы можете управлять этим, установив свойства CSS
leftиtopдля классаMuiSlider-valueLabelвручную. Я создал эту ссылку stackblitz.com/edit/react-nxzqnv-qp3hcd?file=demo.tsx,index.css, чтобы вы могли легко ее протестировать/проверить. Это то, что тебе нужно, верно?