Internet Explorer 上的自定义范围滑块问题

Question

下面是我的滑块的 CSS。问题是滑块在 IE 上完全失败。 这里也是网络版：https://codepen.io/mariomez/pen/yLNYdRg 我尝试使用 MS 填充剂，但效果不佳，因为我不熟悉如何正确使用它们。

.valeurPrix {
  position: absolute;
  top: -59px;
  left: 177px;
}

.range-slider {
  position: relative;
  width: 450px;
  float: left;
  margin-right: 5px;
}

.range-slider .input-range {
  -webkit-appearance: none;
  width: 449px;
  height: 5px;
  border-radius: 5px;
  background: #ccc;
  outline: none;
}

.range-slider .input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #164188;
  cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}

.range-slider .input-range::-webkit-slider-thumb:hover {
  background: #164188;
}

.range-slider .input-range:active::-webkit-slider-thumb {
  background: #164188;
}

.range-slider .input-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #164188;
  cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}

.range-slider .input-range::-moz-range-thumb:hover {
  background: #164188;
}

.range-slider .input-range:active::-moz-range-thumb {
  background: #164188;
}

.range-slider .range-value {
  display: inline-block;
  position: relative;
  width: 100px;
  color: #fff;
  font-size: 23px;
  line-height: 32px;
  text-align: center;
  border-radius: 3px;
  background: #164188;
  padding: 5px 10px;
  margin-left: 7px;
}



::-moz-range-track {
  background: #ccc;
  border: 0;
}

input::-moz-focus-inner {
  border: 0;
}

您能否指导我如何在此代码上使用 MS 填充器？

Answer 1

首先，由于the input event只支持在IE浏览器中输入text和password类型，建议你可以尝试使用mouseup 事件来获取范围值。代码如下：

var range = $('.input-range'),
  value = $('.range-value');

value.html(range.attr('value') + ' %');

range.on('mouseup', function() {
  value.html(this.value + ' %');
});

其次，请尝试使用以下CSS样式：

<style>
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .PrixMin {
        float: left;
        color: #164188;
        font-size: 19px;
        margin-right: 5px;
    }

    .selecteurPrix {
        padding-top: 15px;
    }

    body {
        font-family: sans-serif;
        padding: 40px;
    }

    .valeurPrix {
        position: absolute;
        top: -59px;
        left: 177px;
    }

    .range-slider {
        position: relative;
        width: 450px;
        float: left;
        margin-right: 5px;
    }


    @media (-webkit-min-device-pixel-ratio:0) {
        /* Non-IE styles here*/
        .range-slider .input-range {
            -webkit-appearance: none;
            width: 449px;
            height: 5px;
            border-radius: 5px;
            background: #ccc;
            outline: none;
        }
    }

    @media (-ms-high-contrast:none),(-ms-high-contrast:active) {
        /* IE styles here*/
        .range-slider .input-range {
            /*removes default webkit styles*/
            -webkit-appearance: none;
            /*fix for FF unable to apply focus style bug */
            border: 1px solid white;
            /*required for proper track sizing in FF*/
            width: 450px;
            outline: none;
        }
    }

    .range-slider .input-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #164188;
        cursor: pointer;
        -webkit-transition: background .15s ease-in-out;
        transition: background .15s ease-in-out;
    }

                .range-slider .input-range::-webkit-slider-thumb:hover {
                    background: #164188;
                }

            .range-slider .input-range:active::-webkit-slider-thumb {
                background: #164188;
            }

            .range-slider .input-range::-moz-range-thumb {
                width: 20px;
                height: 20px;
                border: 0;
                border-radius: 50%;
                background: #164188;
                cursor: pointer;
                -webkit-transition: background .15s ease-in-out;
                transition: background .15s ease-in-out;
            }

                .range-slider .input-range::-moz-range-thumb:hover {
                    background: #164188;
                }

            .range-slider .input-range:active::-moz-range-thumb {
                background: #164188;
            }

        .range-slider .range-value {
            display: inline-block;
            position: relative;
            width: 100px;
            color: #fff;
            font-size: 23px;
            line-height: 32px;
            text-align: center;
            border-radius: 3px;
            background: #164188;
            padding: 5px 10px;
            margin-left: 7px;
        }
    ::-moz-range-track {
        background: #ccc;
        border: 0;
    }
    input::-moz-focus-inner {
        border: 0;
    }

    input[type=range] {
        margin: 2px;
    }

        input[type=range]::-ms-track {
            width: 450px;
            height: 5px;
            /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
            background: transparent;
            /*leave room for the larger thumb to overflow with a transparent border */
            border-color: transparent;
            border-width: 6px 0;
            /*remove default tick marks*/
            color: transparent;
        }

        input[type=range]::-ms-fill-lower {
            background: #ccc;
            border-radius: 10px;
        }

        input[type=range]::-ms-fill-upper {
            background: #ccc;
            border-radius: 10px;
        }

        input[type=range]::-ms-thumb {
            border: none;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #164188;
        }

        input[type=range]:focus::-ms-fill-lower {
            background: #ccc;
        }

        input[type=range]:focus::-ms-fill-upper {
            background: #ccc;
        }
</style>

IE浏览器的结果如下（你可以从here找到整个示例代码）：

Answer 2

body {
    padding: 30px;
}
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

  <input type="range">