不支持 HTML5 输入类型范围时的滑块 UI

Question

我需要类似 HTML 范围输入的东西来输入我正在处理的网站，

但我需要它与不支持此功能的旧版本的 Android 一起使用。

<input type="range" value="10" min="0" max="100" />

当支持时看起来有点像这样：http://jqueryui.com/demos/slider/

我只做一个演示，所以我只需要 UI，所以只需一个点，您就可以沿着滑块拖动。该网站是移动优化的，所以需要一个触摸屏界面，这就是为什么我不能使用jQuery UI。有没有办法在不使用jQuery Mobile框架的情况下做到这一点？谢谢

Answer 1

我用jQuery UI和这个技巧完成了它，让它与触摸屏一起工作：http://touchpunch.furf.com/

Answer 2

这是一个主要从头开始编写的滑块。也就是说，不使用任何 UI 库。我使用 jQuery、_ 和 backbone，但如果你不关心它们，它们可以替换为更原始的浏览器 API 版本。尚未添加 http://jsfiddle.net/shyamh/gBNAg/Touch 事件支持的完整示例，但这应该不会太难连接。

function slider(id, width) {
        var _i = this,
            // todo - can we refactor to get _thumbWidth from element styles?
            _thumbWidth = 24,
            _slideRange = width, 
            // View template for control. Typically this would be outside the class, 
            // so it's reused between multiple instance of this control.
            // The id is bound as a paremeter in the template. There may be other parameters.
            //
            _t = '<div id="<%=id%>" class="slider" style="width:<%=width%>px;">' +
                 '  <div id="<%=id%>_track" class="sliderTrack"></div>' +
                 '  <div id="<%=id%>_thumbcontainer" class="sliderThumbContainer" style="width:' + _thumbWidth + 'px">' +
                 '    <div id="<%=id%>_thumb" class="sliderThumb"></div>' +
                 '  </div>' +
                 '</div>',
            _currentValue = 0,
            _$el = $(_.template(_t, { id: id, width: (width || 100) })),
            _el = _$el[0],
            _elTrack = $('#' + id + '_track:first', _el)[0],
            _elThumbContainer = $('#' + id + '_thumbcontainer:first', _el)[0];
        _.extend(_i, Backbone.Events);
        function x2Percent(x) {
            if (x < 0) {
                return 0;
            } else {
                var p = x / _slideRange * 100;
                if (p > 100) { p = 100; }
                return p;
            }
        }
        function moveThumbToX(x) {
            var offsetLeft = _$el.offset().left,
                p = x2Percent(x - offsetLeft),
                newX = (Math.round(p / 100 * _slideRange) - _thumbWidth / 2);
            newX = (newX < 0) ? 0 : ((newX > (width - _thumbWidth)) ? (width - _thumbWidth) : newX) ;
            _elThumbContainer.style.left = newX + "px";
            _currentValue = p;
        }
        function _elClick(e) {
            moveThumbToX(e.x);
            // todo - fire backbone event for slider changed event
        }
        function _elThumbContainerMouseDown(e) {
            document.addEventListener("mousemove", _mouseMove);
            document.addEventListener("mouseup", _mouseUp);
            e.preventDefault();
            e.stopPropagation();
            // todo - fire backbone event for slider drag-started event
        }
        function _mouseMove(e) {
            var x = e.x;
            e.preventDefault();
            requestAnimationFrame(function() {
                moveThumbToX(e.x);
                // todo - fire backbone event for slider dragging event
            });        
        }
        function _mouseUp(e) {
            e.preventDefault();
            document.removeEventListener("mousemove", _mouseMove);
            document.removeEventListener("mouseup", _mouseUp);
            // todo - fire backbone event for slider drag-ended event
        }
        // set the value to p, where p is between 0..100
        _i.setValue = function(p) {
            moveThumbToX(Math.round(p / 100 * _slideRange));    
        }
        _i.getElement = function () {
            return _el;
        }
        var _ctor = function () {
            _el.addEventListener("click", _elClick);
            _elThumbContainer.addEventListener("mousedown", _elThumbContainerMouseDown);
        }();
    }