Ползунок диапазона с центром большого пальца над краями со стилизованными компонентами

avatar
Seth Lutske
8 августа 2021 в 22:05
255
0
0

У меня есть ползунок диапазона (<input type="range">), стиль которого я применил с помощью react styled-components. Я следовал общему смыслу Пользовательский стиль ползунка ввода с использованием стилевых компонентов, и мой стиль работает правильно:

import styled, { css } from "styled-components";

const trackH, thumbH, thumbD, thumbC, trackC, filllC; // define some values

const track = css`
  box-sizing: border-box;
  height: 4px;
  background: ${trackC};
  border-radius: 0px;
  border: 1px solid rgb(155, 155, 155);
  margin-right: -1px;
`;

const trackFill = css`
  ${track};
  height: ${trackH};
`;

const fill = css`
  height: ${trackH};
  background: ${filllC};
  border-radius: 4px;
`;

const thumb = css`
  box-sizing: border-box;
  width: ${thumbD};
  height: ${thumbH};
  position: "absolute";
  border-radius: 3px;
  background: ${thumbC};
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  cursor: pointer;
`;

/**
 * Styled input slider component
 */
const Input = styled.input`
  width: 100%;

  & 
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
  }

  &:focus {
    outline: none;
  }

  &:focus::-webkit-slider-thumb {
    outline: -webkit-focus-ring-color auto 5px;
  }

  &:focus::-moz-range-thumb {
    outline: -webkit-focus-ring-color auto 5px;
  }

  &:focus::-ms-thumb {
    outline: -webkit-focus-ring-color auto 5px;
  }

  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--val) - var(--min)) / var(--range));
  --sx: calc(0.5 * ${thumbH} + var(--ratio) * (100% - ${thumbH}));

  margin: 0;
  padding: 0;
  height: ${thumbH};
  background: transparent;
  font: 1em/1 arial, sans-serif;

  // more firefox and ms specific styling here ...
`;

Однако я хочу стилизовать взаимосвязь дорожки и бегунка таким образом, чтобы, когда значение соответствует минимальному или максимальному значению ползунка, бегунок был центрирован по краям дорожки. Прямо сейчас, когда ползунок находится в минимальном положении, левый край бегунка находится на одном уровне с левым концом дорожки, а когда он в максимальном положении, правый край бегунка находится на одном уровне с правым концом дорожки. Я хочу, чтобы большой палец располагался по центру над каждым концом дорожки, когда он находится на крайних точках.

enter image description here

enter image description here

(большой палец должен располагаться над 0 или 24 на изображениях выше)

Я видел вопрос HTML Range в стиле firefox. Расположите большой палец по центру по краям, и есть хорошее решение для круглых рукояток большого пальца. Я хочу ручку прямоугольной формы, так что это решение мне не подходит. Существует также Как сместить прямоугольный бегунок на ползунке диапазона, но это решение касается не столько центрирования по краям, сколько предотвращения переполнения. И я не могу найти решение, которое бы повлияло на мой сценарий.

Вот codeandbox, показывающий мой ползунок. Чтобы донести мысль, я включил несколько галочек значений, используя react-compound-slider, хотя имейте в виду, что мой фактический слайдер полностью самодельный с использованием стилизованных компонентов. Однако галочки подчеркивают, что, хотя они хорошо совпадают с дорожками, сама ручка должна быть центрирована по краям, чтобы значения ползунка совпадали с галочками. Как мне этого добиться?

Источник

Ответы (0)