De forma predeterminada, los controladores en React rc-slider se traducen en -50% y su estilo es que el controlador se superpone al riel, pero necesito que las manijas estén contenidas dentro del riel, después de expandir el riel y encoger las manijas, el estilo se presenta a continuación
como veis los handles estan fuera de la pista y necesito que queden contenidos dentro, he intentado trasladarlos por cero o por 0 para el de la izquierda y 100% para el de la derecha, pero esto provocaria que se superpusieran uno al otro así si no es que se superponen, este sería el comportamiento que busco aquí están mis estilos

 .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 }

debido a que el ancho se establece dinámicamente, no puedo escalarlo ni nada. Me quedé sin ideas, así que por favor ayuda :)

Muchas gracias