Как стилизовать input rаnge?

Question

у меня есть такой Input

input {
        width: 800px;
        margin: 0;
        height: 15px;
        -webkit-appearance: none;
        border-radius: 10px;
        border: 1px solid red;
        --ticksThickness: 1px;
        --ticksHeight: 100%;
        --ticksColor: red;
        background: linear-gradient(to right, var(--ticksColor) var(--ticksThickness), transparent 1px) 12px;
        background-size: calc((100% - 24px) / var(--max)) var(--ticksHeight);
    }
    input::-webkit-slider-thumb {
        width: 24px;
        -webkit-appearance: none;
        height: 24px;
        border-radius: 25px;
        cursor: ew-resize;
        background: red;
    }

<input type="range" min="0" max="5" step="1" style="--max:5">

Могу ли я убрать 2 самые крайние черточки слева и справа? А так же можно ли сделать, чтобы левая часть от кружочка красилась в другой цвет?

Answer 1

перед просмотром рекомендую хлебнуть валерьяночки, ибо ситхи восстали... тьфу... префиксы вернулись...

input {
  width: 300px;
  height: 25px;
  -webkit-appearance: none;
  border-radius: 10px;
  border: 3px solid red;
}

/* вот мы и вернулись к префиксам...))) */

/* трек */
::-moz-range-track{background: blue;}
::-webkit-slider-runnable-track{background: blue;}
::-ms-track{background: blue;}

/* пупырка */
::-moz-range-thumb{background: green;}
::-webkit-slider-thumb{background: green;}
::-ms-thumb{background: green;}

/* заполнение */
::-moz-range-progress{background: pink;}
::-ms-fill-lower{background: pink;}
/* для вебкита вроде нет заполнения */

/* -moz-ы от FF 22(в т.ч. и на ведроидах)
-webkit-ы хз, но распространяются почти на
все остальные(хром, опера, сафари)... кроме эджа... */

<input type="range" min="0" max="5" step="1" id='x'>
<br>подробнее можно ознакомиться где то здесь<br>
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value
<br> в боковом меню еще куча ссылок<br>

<br>и например здесь<br> https://css-tricks.com/sliding-nightmare-understanding-range-input/

БЛОГ НА HUSL

Как стилизовать input rаnge?

Ответы (1 шт):