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

【问题标题】：How can I label my html range slider?如何标记我的 html 范围滑块？
【发布时间】：2015-09-12 18:51:55
【问题描述】：

我不使用 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;
}

【问题讨论】：

如果您提供 sn-p 或 Fiddle 会很有帮助，因为您的问题不仅限于其 CSS 代码。

标签： javascript html css twitter-bootstrap-3 uislider

【解决方案1】：

您可以使用media 选择器

例如

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


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

【讨论】：

那将如何标记它？
它不一定要给它贴上标签，但它会在指定的屏幕尺寸下显示某些内容。这就是大多数网站创建移动网站的方式。这应该会产生预期的效果。