glide-design-system/dist/components/slider/slider.module.css

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

.sliderContainer{
    width:100%;
    padding:8px;
    position: relative;
}

.slider{
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    width:100%;
    border-radius: 16px;
    background:#3a5d95;
    height:8px;
    transition:  0.3s ease-in-out;
    border: 1px solid #d7d7d7;
}

.slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    height:16px;
    width:16px;
    background-color: #1b3764;
    border-radius: 50%;
}

.slider::-moz-range-thumb {
    height:16px;
    width:16px;
    background-color: #1b3764;
    border-radius: 50%;
}