Блог

По умолчанию ручки в React РК-слайдер переводятся на -50%, и их стиль-это что ручка накладывается на рельс, но мне нужны маркеры, которые должны содержаться в пределах железнодорожной, после расширения железнодорожных и сжимая ручки стиль представлена, как показано ниже
, как вы можете видеть, ручки и за пределами трека, и мне нужно, чтобы они находились внутри, я попытался перевести их на ноль или 0 для левой и 100% для правой, но это могло вызвать их перекрывают друг друга так, как если бы не то, что они перекрываются, это будет поведение я после вот мои стили

 .rc-slider {
    position: relative;
    height: 16px;
    padding: 5px 0;
    width: 100%;
    border-radius: 6px;
    touch-action: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: transparent;
    display: flex;
    align-items: center;
}
.rc-slider * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
    position: absolute;
    width: 100%;
    background-color: #f9f8f8;
    height: 100%;
    border-radius: 6px;

}
.rc-slider-track {
    position: absolute;
    height: 100%;
    border-radius: 6px;
    background-color: #CDEA9F;
    opacity: 70%;
}
.rc-slider-handle {
    position: absolute;
    width: 24px;
    height: 12px;
    cursor: pointer;
    cursor: -webkit-grab;
    cursor: grab;
    border-radius: 40%;
    background-color: #8ECC29;
    touch-action: pan-x;
}

.rc-slider-handle-1 {
    transform: translateX(0) !important; <- this is wrong as can overlap

}
.rc-slider-handle-2 {
    transform: translateX(-100%) !important;<- this is wrong as can overlap

}
 

поскольку ширина задается динамически, я не могу ее масштабировать или что-то в этом роде. У меня закончились идеи, так что, пожалуйста, помогите 🙂

Большое спасибо