对齐 React Range Slider 的拇指，使其不会超出边界框

Question

我正在尝试制作一个范围滑块并且我想让拇指（靛蓝色）不超出边界框边框（红色）。

如果拇指小，那么它看起来很完美，但如果拇指大，就我而言，那么它看起来不对齐。

我在 react-range 库的帮助下使用 React & Tailwind，代码如下：

import * as React from "react"
import { Range } from "react-range"

export default function App() {
    const [values, setValues] = React.useState([50])

    return (
        <div className="w-full flex justify-center">
            <div className="w-48 border-4 border-red-300">
                <h1 className="text-4xl">Range</h1>
                <label>Slider</label>
                <Range
                    step={1}
                    min={0}
                    max={75}
                    values={values}
                    onChange={(values) => {
                        setValues(values)
                    }}
                    renderTrack={({ props, children }) => (
                        <div
                            {...props}
                            className="w-full h-3 pr-2 my-4 bg-gray-200 rounded-md"
                        >
                            {children}
                        </div>
                    )}
                    renderThumb={({ props }) => (
                        <div
                            {...props}
                            className="w-5 h-5 transform translate-x-10 bg-indigo-500 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        />
                    )}
                />
                <span>{values[0]}px</span>
            </div>
        </div>
    )
}

我也做了一个可复现的demo → https://codesandbox.io/s/react-tailwind-align-range-slider-ghyf0?file=/src/App.tsx

我希望拇指与 Slider & 0px 对齐，否则它看起来不对。即使是本机范围滑块也不会超出边界框。我怎样才能达到这种效果？

Answer 1

我最终使用 react-slider 而不是保留在边界框内。

import * as React from "react"
import { Range } from "react-range"
import ReactSlider from "react-slider"

export default function App() {
    const [values, setValues] = React.useState([0])
    const [value, setValue] = React.useState(0)

    return (
        <div className="w-full flex justify-center">
            <div className="w-48 border-4 border-red-300">
                <h1 className="text-4xl">Range</h1>
                <label>React Range</label>
                <Range
                    step={1}
                    min={0}
                    max={75}
                    values={values}
                    onChange={(values) => {
                        setValues(values)
                    }}
                    renderTrack={({ props, children }) => (
                        <div
                            {...props}
                            className="w-full h-3 pr-2 my-4 bg-gray-200 rounded-md"
                        >
                            {children}
                        </div>
                    )}
                    renderThumb={({ props }) => (
                        <div
                            {...props}
                            className="w-5 h-5 transform translate-x-10 bg-indigo-500 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        />
                    )}
                />
                <span>{values[0]}px</span>
                <br />
                <br />
                <hr />
                <br />
                <label>React Slider</label>
                <ReactSlider
                    step={1}
                    min={0}
                    max={75}
                    className="w-full h-3 pr-2 my-4 bg-gray-200 rounded-md cursor-grab"
                    thumbClassName="absolute w-5 h-5 cursor-grab bg-indigo-500 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 -top-2px"
                    value={value}
                    onChange={(value: any) => {
                        setValue(value)
                    }}
                />
                <span>{value}px</span>
            </div>
        </div>
    )
}

Codesandbox 上的定位有点偏差，但它通过提供一点绝对定位在我的应用程序上起作用:)

Codesandbox → https://codesandbox.io/s/react-tailwind-align-range-slider-ghyf0?file=/src/App.tsx

Answer 2

我遇到了完全相同的问题，我发现了这个 hacky 解决方案。

在我的例子中，拇指大小为 16 x 16 像素，轨道高度为 2 像素。

const SliderTrack = styled.div`
    height: 2px;
    width: calc(100% - 16px);
    align-self: center;
    position: relative;

    &::before {
      content: '';
      display: inherit;
      height: 2px;
      width: 8px;
      transform: translate(-8px, 2px);
      background-color: 'red';
      z-index: -1;
    }

    &::after {
      content: '';
      display: inherit;
      height: 2px;
      width: 8px;
      transform: translate(8px, -2px);
      background-color: 'green';
      z-index: -1;
      position: absolute;
      right: 0;
    }
`;

对齐 React Range Slider 的拇指，使其不会超出边界框

Align Thumb of React Range Slider so it doesn't go outside bounding box

html

javascript

css

reactjs

tailwind-css