这是一款简单易用的 Slider Bar，原生 HTML + CSS + JS 编写， 亲测兼容 Chrome, Firefox, IE 9+ , 欢迎一起探讨、交流。

image

引用

<link rel="stylesheet" type="text/css" href="./index.css">
<div id="slider"></div>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
    var sb = new EasySliderBar({
        el: 'slider'
    })
</script>

参数

• 当参数 el 非法，slider bar 取消创建
• 当其他参数非法，取默认值

方法

源码

index.js

/**
 * Created by lonelydawn on 2017-11-20.
 * EasySliderBar - Easy slider bar
 */

// Polyfill
Array.prototype.forEach = Array.prototype.forEach || function (cb) {
    for (var i = 0; i < this.length; i++) {
        cb(this[i], i)
    }
}
Array.prototype.filter = Array.prototype.filter || function (cb) {
    var arr = []
    for (var i = 0; i < this.length; i++) {
        if (cb[this[i], i]) {
            arr.push(this[i])
        }
    }
    return arr
}

var EasySliderBar = function (options) {
    // Add class, and return the changed className
    var getPushedClass = function (className, value) {
        return typeof className === 'string' && typeof value === 'string'
            ? className.split(' ').concat(value).join(' ') : className 
    }
    // Remove class, and return the changed className
    var getRemovedClass = function (className, value) {
        if (typeof className === 'string' && typeof value === 'string') {
            return className.split(' ').filter(function (item) {
                return item !== '' && item !== value
            }).join(' ')
        }
        return className
    }
    // Get parallel pixel to scale
    var getInterval = function () {
        return track.clientWidth / (max - min)
    }
    // Limit bars' moving range
    var getValidLeft = function (value) {
        if (value < 0) {
            return 0
        } else if (value > track.clientWidth) {
            return track.clientWidth
        } else {
            return value
        }
    }
    // Add trigger on slidebar
    var setBarMove = function (bar, index) {
        bar.onmousedown = function (e) {
            var start = (e || window.event).clientX
            var left = Math.floor((bar.position - min) * getInterval())
            bar.label.className = getRemovedClass(bar.label.className, 'hidden')
            // Execute callback
            onBarMoveBegin({
                index: index,
                position: Number(bar.position)
            })
            document.onmousemove = function (e) {
                var movingLeft = getValidLeft(left + (e || window.event).clientX - start)
                var movingPosition = (min + movingLeft / getInterval()).toFixed(scale)
                bar.label.innerHTML = movingPosition
                bar.style.left = movingLeft - barOffset + 'px'
                onBarMoving({
                    index: index,
                    position: Number(movingPosition)
                })
            }
            document.onmouseup = function (e) {
                bar.position = (min + getValidLeft(left + (e || window.event).clientX - start) / getInterval()).toFixed(scale)
                bar.label.className = getPushedClass(bar.label.className, 'hidden')
                // Execute callback
                onBarMoveEnd({
                    index: index,
                    position: Number(bar.position)
                })
                document.onmousemove = null
                document.onmouseup = null
                bar.releaseCapture && bar.releaseCapture()
            }
            bar.setCapture && bar.setCapture()
            return false
        }
    }
    var el = options.el
    var scale = options.scale || 0
    var min = !isNaN(options.min) ? options.min : 0
    var max = !isNaN(options.max) ? (options.max > min ? options.max : min + 100) : 100
    var barNumber = options.barNumber || 1
    var positions = Object.prototype.toString.call(options.positions) === '[object Array]' ? options.positions : []
    for (var i = 0; i < barNumber; i++) {
        positions[i] = positions[i] && positions[i] >= min && positions[i] <= max ? positions[i] : min
    }
    var type = options.type || 'circle'
    // Set bars' width and height by type
    var trackHeight = !isNaN(options.trackHeight) ? options.trackHeight : 10
    var barWidth = {
        square: trackHeight * 2,
        circle: trackHeight * 3,
        diamond: 20
    }[type]
    var barHeight = {
        square: trackHeight * 3,
        circle: trackHeight * 3,
        diamond: trackHeight
    }[type]
    var barOffset = barWidth / 2
    var labelWidth = (30 + 7 * scale) || 30
    var labelOffset = labelWidth / 2 - barOffset
    // Get customized callback
    var onBarMoveBegin = options.onBarMoveBegin || new Function()
    var onBarMoving = options.onBarMoving || new Function()
    var onBarMoveEnd = options.onBarMoveEnd || new Function()

    var wrapper = document.getElementById(el)
    if (!wrapper) {
        return
    }
    // Init wrapper height
    wrapper.style.padding = barOffset + 5 + 'px'
    wrapper.style.height = trackHeight + 'px'
    // Empty container
    var childs = wrapper.childNodes
    for (var i = childs.length - 1; i > -1; i--) {
        wrapper.removeChild(childs[i])
    }
    // Create track
    var track = document.createElement('div')
    track.className = 'slider-track'
    wrapper.appendChild(track)
    // Create slider bar
    var barStack = []
    for (var counter = 0; counter < barNumber; counter++) {
        var bar = document.createElement('div')
        bar.className = 'slider-bar ' + type
        bar.position = positions[counter]
        bar.style.width = barWidth + 'px'
        bar.style.height = barHeight + 'px'
        bar.style.top = (trackHeight - barHeight) / 2 + 'px'
        bar.style.left = Math.floor((positions[counter] - min) * getInterval()) - barOffset + 'px'
        setBarMove(bar, counter)
        // Create slider bar label
        var label = document.createElement('div')
        label.className = 'slider-label hidden'
        label.style.width = labelWidth + 'px'
        label.style.left = -labelOffset + 'px'
        label.innerHTML = positions[counter].toFixed(scale)
        bar.label = label
        // Create DOM structure
        bar.appendChild(label)
        track.appendChild(bar)
        barStack.push(bar)
    }
    return {
        // Set some bars' position. (If index is not defined, set all.)
        setBarPosition: function (pos, index) {
            var set = function (bar) {
                if (pos >= min && pos <= max) {
                    bar.position = pos
                    bar.style.left = Math.floor((pos - min) * getInterval()) - barOffset + 'px'
                    bar.label.innerHTML = Number(pos).toFixed(scale)
                }
            }
            index ? set(barStack[index]) : barStack.forEach(function (item) {
                set(item)
            })
        },
        // Return some bars' position. (If index is not defined, return all.)
        getBarPosition: function (index) {
            return index >= 0 ? barStack[index].position : barStack.map(function (item) {
                return item.position
            })
        }
    }
}

index.css

.slider-track {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 100px;
    font-family: Roboto;
    background-color: #e4e7ed;
}
.slider-label {
    padding: 3px 0;
    position: absolute;
    top: -40px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    background-color: #303133;
    transition: all 300ms linear;
}
.slider-label:after {
    width: 0px;
    height: 0px;
    border: 6px transparent solid;
    border-top-color: #303133;
    position:absolute;
    top: 100%;
    left: calc(50% - 6px);
    content:""
}
.slider-label.hidden {
    display: none;
}
.slider-bar {
    position: absolute;
    box-sizing: border-box;
}
.slider-bar:hover .slider-label {
    display: block;
}

.slider-bar.circle,
.slider-bar.square {
    border: 2px solid #409EFF;
    background-color: #FFF;
}
.slider-bar.circle {
    border-radius: 50%;
}
.slider-bar.square {
    border-radius: 3px;
}
.slider-bar.diamond {
    background-color: #409EFF;
}
.slider-bar.diamond:before {
    width: 0px;
    height: 0px;
    border: 10px transparent solid;
    border-bottom-color: #409EFF;
    position:absolute;
    bottom: 100%;
    left: 0;
    content:""
}
.slider-bar.diamond:after{
    width: 0px;
    height: 0px;
    border: 10px transparent solid;
    border-top-color: #409EFF;
    position:absolute;
    top: 100%;
    left: 0;
    content:""
}

源码奉上，任君 Hack 。

下载地址

GitHub