Блог

В моем приложении есть слайдер пользовательского интерфейса Material. Я хочу, чтобы большой палец оставался невидимым до тех пор, пока пользователь не изменит значение ползунка. Когда используется ползунок, я хочу, чтобы большой палец оставался видимым при значении, которое устанавливает пользователь. Используя свойство active CSS, мне удалось скрыть большой палец и показывать его только тогда, когда пользователь его использует, то есть когда ползунок перетаскивается пальцем или указателем мыши. Когда взаимодействие прекращается, я хочу, чтобы оно оставалось на выбранном значении, но оно исчезает.

1. Начальное состояние
2. Слайдер взаимодействует с (перетаскивается)
3. Завершенное взаимодействие

Я попытался добавить еще один дублированный слайдер с постоянно видимым компонентом thumb, а затем попытался условно отобразить один из слайдеров в зависимости от значения ( value ? <Slider1 /> : <Slider2 /> ), но в какой-то степени это сработало. Thumb всегда был установлен в начало ползунка, независимо от значения.

Есть идеи? Спасибо.

Примеры кода см. в разделе material ui slider API.

Возможно, используя withStyles(), импортируйте withStyles и ползунок:

 import { withStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";
 

затем настройте свой слайдер, что-то вроде этого:

 export const CustomizedSlider = withStyles({
  thumb: {
    height: 28,
    width: 28,
    backgroundColor: "transparent",
    marginTop: -14,
    marginLeft: -14,
    "amp;:hover, amp;$active": {
      backgroundColor: "red",
    },
  },
})(Slider);
 

Цвет по умолчанию должен быть «прозрачным», и он изменится на «красный» при наведении на него курсора мыши. Подробнее о withStyles() здесь . Надеюсь, это вам поможет !.

ссылка на код: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/slider/CustomizedSlider.js