如何仅使用HTML5实现滑动尺码选择器

实现思路 #

利用HTML5原生的range滑块和datalist元素组合实现，不需要额外引入外部资源，仅需内嵌少量CSS调整样式即可匹配参考图效果，符合HTML5规范要求。

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>滑动尺码选择器</title>
    <style>
        .size-selector {
            width: 300px;
            margin: 50px auto;
        }
        /* 自定义滑块轨道样式 */
        input[type="range"] {
            width: 100%;
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            outline: none;
            -webkit-appearance: none;
        }
        /* 自定义滑块拖动块样式 */
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: #2385bb;
            border-radius: 50%;
            cursor: pointer;
        }
        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: #2385bb;
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }
        /* 尺码标签布局 */
        .size-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            padding: 0 5px;
        }
        .size-labels span {
            font-size: 14px;
            font-weight: 500;
        }
        /* 选中结果展示（可选） */
        .selected-size {
            margin-top: 20px;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="size-selector">
        <!-- 核心滑块控件 -->
        <input 
            type="range" 
            min="1" 
            max="4" 
            value="1" 
            list="size-markers"
            oninput="document.getElementById('current-size').textContent = ['S','M','L','XL'][this.value-1]"
        >
        <!-- 滑块固定点位标记 -->
        <datalist id="size-markers">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
        </datalist>
        <!-- 底部尺码文字标签 -->
        <div class="size-labels">
            <span>S</span>
            <span>M</span>
            <span>L</span>
            <span>XL</span>
        </div>
        <!-- 选中结果展示（可选） -->
        <div class="selected-size">
            选中尺码：<strong id="current-size">S</strong>
        </div>
    </div>
</body>
</html>

效果说明 #

• 滑块只能在S/M/L/XL四个固定点位停留，不会出现中间无效值
• 可根据需求自行调整颜色、尺寸参数匹配设计稿
• 所有特性均为HTML5原生支持，兼容性覆盖所有主流现代浏览器
• 如果不需要实时展示选中结果，可删除oninput属性和selected-size对应的代码块，完全不依赖JavaScript也能保留滑动选择尺码的核心功能

内容的提问来源于stack exchange，提问作者Francisco Lorenzo