如何标记我的html范围滑块？

Question

我没有使用jquery滑块。我使用bootstrap 3.我想用0,500,1000标记我的范围滑块。我希望它可以在移动设备，台式机，平板电脑上使用。

.ios-range-slider {
    -webkit-appearance: none;
    border-radius: 10px;
    background-color: #D7DEDD;
    width: 100%;
    height: 10px;
}


input[type="range"]::-webkit-slider-thumb{
     -webkit-appearance: none;
    background-color: white;
    border-radius: 10px;
    width: 15px;
    height: 15px;
    border: 1px solid gray;
}

Answer 1

您可以使用media选择器

e.g。

@media all and (max-width: 768px) {
    .ios-range-slider {
    }
}


@media all and (max-width: 400px) {
    .ios-range-slider {
    }
}