input[type=range] {
-webkit-appearance: none; /* Chrome, Safari, Opera, Edge */
-moz-appearance: none; /* Firefox */
appearance: none;
width: 100%; /* Размер: ширина */
background: rgba(88,41,207,0); /* Прозрачный фон */
}


/* Chrome/Safari/Edge */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px!important; /* Размер бегунка */
width: 10pximportant;
background: #6347cf!important; /* Цвет бегунка */
border-radius: 50%;
margin-top: -0px important; /* Центровка относительно линии */
}



/* Firefox */
input[type=range]::-moz-range-thumb {
height: 10pximportant;
width: 10pximportant;
background: #6347cf!important;
border-radius: 50%;
}

/* Chrome/Safari/Edge */
input[type=range]::-webkit-slider-runnable-track {
height: 5pximportant;
background: rgba(100,71,207,0.51)!important; /* Цвет линии */
border-radius: 5px;
}

/* Firefox */
input[type=range]::-moz-range-track {
height: 5pximportant;
background: rgba(100,71,207,0.38)!important;
border-radius: 5px;
}

/* Firefox (проще всего) */
input[type=range]::-moz-range-progress {
background: rgb(85,53,204)!important;
height: 5px;

}

/* Chrome/Safari/Edge */
input[type=range]::-webkit-slider-progress {

background: rgba(71,44,173,0.97)!important; /* Цвет бегунка */

}







/* ===== Range: кастомные цвета ползунков ===== */
input[type="range"]{
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background: #e2e8f0; /* цвет дорожки */
outline: none;
}

/* Chrome / Safari */
input[type="range"]::-webkit-slider-runnable-track{
height: 6px;
border-radius: 999px;
background: #e2e8f0; /* дорожка */
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
margin-top: -3px; /* чтобы thumb стал по центру дорожки */
border-radius: 50%;
background: #7c3aed; /* цвет рычажка */
border: 3px solid #fff; /* обводка (по желанию) */
box-shadow: 0 6px 16px rgba(124,58,237,.25);
cursor: pointer;
}

/* Firefox */
input[type="range"]::-moz-range-track{
height: 6px;
border-radius: 999px;
background: #e2e8f0; /* дорожка */
}
input[type="range"]::-moz-range-thumb{
width: 18px;
height: 18px;
border-radius: 50%;
background: #7c3aed; /* цвет рычажка */
border: 3px solid #fff;
box-shadow: 0 6px 16px rgba(124,58,237,.25);
cursor: pointer;
}