Блог

Главная - Вопросы по программированию - Исправлено отображение большого пальца ползунка диапазона типов ввода

Исправлено отображение большого пальца ползунка диапазона типов ввода

#html #css #input

#HTML #css #ввод

Вопрос:

несколько дней назад я попросил помощи с оформлением элемента диапазона типов ввода. Все работает просто отлично, за исключением одной вещи. Большой палец слайдера отображается некорректно.

Моя цель — отобразить это вот так.

введите описание изображения здесь

Но это самое близкое к моей цели, что я могу сделать.

введите описание изображения здесь

С этим большим пальцем ползунка есть две проблемы. Как вы можете видеть, он обрезан и не выделяется, как на картинке с моей целью. Я знаю, что это вызвано overflow: hidden. Но это переполнение: скрыто там специально, потому что это подход, который я получил в качестве совета по моему последнему вопросу. Следующая проблема связана с цветом и рамкой-тенью большого пальца слайдера. Я переключил его на красный, чтобы он был более заметен, когда я пытался исправить первую проблему. Но если я переключу его обратно на белый и попытаюсь добавить к нему тень от окна, чтобы добиться того эффекта, который есть на картинке цели, он перезапишет старую тень от окна, которая создает этот белый эффект «выделенного».

введите описание изображения здесь

Кто-нибудь сталкивался с проблемой такого типа или у него есть другое решение для этого? Спасибо 🙂

 body{
  background:#ccc;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      width: 100%;
      -webkit-appearance: none;
      background-color: #ee7b82;
      border-radius: .3em;
      position: relative;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
        height: .35em;
        border: none;
        border-radius: 3px;
        color: white;
        overflow: hidden;
    }
    
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        cursor: ew-resize;
        box-shadow: -100em 0 0 100em white;
        -webkit-appearance: none;
        border: none;
        height: 1.1em;
        width: 1.1em;
        border-radius: 50%;
        background:red;

        /* 
        Box-shadow to slider thumb,when color is changed to white,so it'll be visible, but it rewrites old box-shadow ,which is making that selected effect.
        
         background: white;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
        */
        margin-top: -.2em;
    }

    input[type=range]:focus {
        outline: none;
    }
}

/*MOZ*/
input[type="range"]::-moz-range-progress {
    background-color: white; 
}

input[type="range"]::-moz-range-track {  
    background-color: #ee7b82;
}

/*IE*/
input[type="range"]::-ms-fill-lower {
    background-color: white; 
}

input[type="range"]::-ms-fill-upper {  
    background-color: #ee7b82;
}  
         <div className="range">
            <p className="heading">HEIGHT</p>
            <input type="range"></input>

            <p className="heading">WEIGHT</p>
            <input type="range"></input>
        </div>

Ответ №1:

изменение в CSS

      input[type='range'] {
     width: 100%;
     -webkit-appearance: none;
     background-color: #ee7b82;
     border-radius: .3em;
     position: relative;
     max-height: 2px;
    }

Ответ №2:

Пожалуйста, попробуйте вместо этого,

Первая проблема измените цвет большого пальца, используя это для другого браузера.

 ::-webkit-slider-thumb //for WebKit/Blink
::-moz-range-thumb //for Firefox
::-ms-thumb //for IE

Я также добавил окно-тень

 box-shadow: 0px 0px 3px 2px white;
  

 body{
  background:#ccc;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      -webkit-appearance: none;
      width: 100%;
      background-color: #ccc !important;
      border-radius: .3em;
      position: relative;
      height: 1.1em;
      overflow: hidden;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        height: .35em;
        border: none;
        border-radius: 3px;
        color: white;
        
        background:#fff;
    }
    
    input[type='range']::-moz-range-thumb{
        -webkit-appearance: none;
        cursor: ew-resize;
        box-shadow: 0px 0px 3px 2px white;
        -webkit-appearance: none;
        border: none;
        height: 1.1em;
        width: 1.1em;
        border-radius: 50%;
        background:red;
        margin-top: -.2em;
    }
    input[type='range']::-ms-thumb{
        -webkit-appearance: none;
        cursor: ew-resize;
        box-shadow: 0px 0px 3px 2px white;
        -webkit-appearance: none;
        border: none;
        height: 1.1em;
        width: 1.1em;
        border-radius: 50%;
        background:red;
        margin-top: -.2em;
    }
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        cursor: ew-resize;
        box-shadow: 0px 0px 3px 2px white;
        border: none;
        height: 1.1em;
        width: 1.1em;
        border-radius: 50%;
        background:red;
        margin-top: -.35em;
    }

    input[type=range]:focus {
        outline: none;
    }
}

/*MOZ*/
input[type="range"]::-moz-range-progress {
    background-color: white; 
}

input[type="range"]::-moz-range-track{  
    background-color: #ee7b82;
}

/*IE*/
input[type="range"]::-ms-fill-lower {
    background-color: white; 
}

input[type="range"]::-ms-fill-upper {  
    background-color: #ee7b82;
}  
 <div className="range">
    <p className="heading">HEIGHT</p>
    <input type="range"></input>

    <p className="heading">WEIGHT</p>
    <input type="range"></input>
</div>