By default, the handles in React rc-slider are translated by -50% and their style is that the handle overlaps the rail, but I need the handles to be contained within the rail, after expanding the rail and shrinking the handles the style presents as below
as you can see, the handles are outside the track and I need them to be contained within, I have tried to translate them by zero or by 0 for the left one and 100% for the right one, but this would cause them to overlap one another like so if not that they overlap, this would be the behavior I am after here are my styles

.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

}

because the width is set dynamically I can not scale it or anything. I ran out of ideas so please help :)

Thanks a lot