.range-slider-container {
    position: relative;
    --price-point-radius: 10px;
    --price-point-diameter: calc(var(--price-point-radius) * 2);
    --price-bar-height: 6px;
    --price-range-height: 8px;
    --range-color: #4264fb;
    height: var(--price-point-diameter);
    margin-left: var(--price-point-radius);
    margin-right: var(--price-point-radius);
}

.range-slider-bar {
    height: var(--price-bar-height);
    transform: translate(0, calc(var(--price-point-radius) - var(--price-bar-height) / 2));
    background-color: #ccc;
    border-radius: 5px;
    display: flex;
}

.range-slider-point {
    width: var(--price-point-diameter);
    height: var(--price-point-diameter);
    background-color: var(--range-color);
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    transform: translate(-50%, calc(-1 * var(--price-point-radius) + var(--price-range-height) / 2));
}
.range-slider-point:first-child {
    left: 0;
}
.range-slider-point:last-child {
    left: 100%;
}

.range-slider-bar-range {
    flex-grow: 1;
    height: var(--price-range-height);
    transform: translate(0, calc((var(--price-bar-height) - var(--price-range-height)) / 2));
    background-color: var(--range-color);
    pointer-events: none;
    border-radius: 5px;
}

.range-slider-placeholder {
    flex-grow: 0;
    background-color: transparent;
}