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

Posted 2023-03-13

【中文标题】如何标记我的 html 范围滑块？

【英文标题】：How can I label my html range slider?

【发布时间】：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 代码。

【参考方案1】：

您可以使用media 选择器

例如

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



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

【讨论】：

那将如何标记它？

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