从另一个函数获取或设置变量

将此javascript粘贴到原始小提琴中并使其正常工作：

function rangeSlider(elem, config, update) {
    var this_ = this;

    this.setValue = function(value) {
        var dragger = this.config.elem.getElementsByTagName('span')[0];
        var range = this.config.elem.getElementsByTagName('div')[0];
        var rangeWidth = range[!this.config.vertical ? 'offsetWidth' : 'offsetHeight'];
        var draggerWidth = dragger[!this.config.vertical ? 'offsetWidth' : 'offsetHeight'];
        dragger.style[!this.config.vertical ? 'left' : 'top'] = (value / 100 * rangeWidth - (draggerWidth / 2)) + 'px';
        this.config.value = value;
    };

    this.getValue = function() {
        return this.config.value;
    };

    var html = document.documentElement,
        range = document.createElement('div'),
        dragger = document.createElement('span'),
        down = false,
        rangeWidth, rangeOffset, draggerWidth, cachePosition;

    this.config = {
        value: (config.value || 0), // set default value on initiation from `0` to `100` (percentage based)
        vertical: (config.vertical || false), // vertical or horizontal?
        rangeClass: "", // add extra custom class for the range slider track
        draggerClass: "", // add extra custom class for the range slider dragger
        drag: function(v) { /* console.log(v); */ }, // function to return the range slider value into something
        elem: elem
    };

    addEventTo = function(el, ev, fn) {
        if (el.addEventListener) {
            el.addEventListener(ev, fn, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + ev, fn);
        } else {
            el['on' + ev] = fn;
        }
    }

    elem.className = (elem.className + ' range-slider ' + (this.config.vertical ? 'range-slider-vertical' : 'range-slider-horizontal')).replace(/^ +/, "");
    range.className = ('range-slider-track ' + config.rangeClass).replace(/ +$/, "");
    dragger.className = ('dragger ' + config.draggerClass).replace(/ +$/, "");

    addEventTo(range, "mousedown", function(e) {
        html.className = (html.className + ' no-select').replace(/^ +/, "");
        rangeWidth = range[!this_.config.vertical ? 'offsetWidth' : 'offsetHeight'];
        rangeOffset = range[!this_.config.vertical ? 'offsetLeft' : 'offsetTop'];
        draggerWidth = dragger[!this_.config.vertical ? 'offsetWidth' : 'offsetHeight'];
        down = true;
        updateDragger(e);
        return false;
    });

    addEventTo(document, "mousemove", function(e) {
        updateDragger(e);
    });

    addEventTo(document, "mouseup", function(e) {
        html.className = html.className.replace(/(^| )no-select( |$)/g, "");
        down = false;
    });

    addEventTo(window, "resize", function(e) {
        var woh = dragger[!this.config.vertical ? 'offsetWidth' : 'offsetHeight'];
        dragger.style[!this.config.vertical ? 'left' : 'top'] = (((cachePosition / 100) * range[!this.config.vertical ? 'offsetWidth' : 'offsetHeight']) - (woh / 2)) + 'px';
        down = false;
    });

    function updateDragger(e) {
        e = e || window.event;
        var pos = !this_.config.vertical ? e.pageX : e.pageY;
        if (!pos) {
            pos = !this_.config.vertical ? e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft : e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        if (down && pos >= rangeOffset && pos <= (rangeOffset + rangeWidth)) {
            dragger.style[!this_.config.vertical ? 'left' : 'top'] = (pos - rangeOffset - (draggerWidth / 2)) + 'px';
            cachePosition = Math.round(((pos - rangeOffset) / rangeWidth) * 100);
            this_.config.value = cachePosition;
            this_.config.drag(cachePosition);
        }
    };

    this.initDragger = function() {
        var woh = dragger[!this.config.vertical ? 'offsetWidth' : 'offsetHeight'];
        cachePosition = ((config.value / 100) * range[!this.config.vertical ? 'offsetWidth' : 'offsetHeight']);
        dragger.style[!this.config.vertical ? 'left' : 'top'] = (cachePosition - (woh / 2)) + 'px';
        this.config.drag(this.config.value);
    };

    range.appendChild(dragger);
    elem.appendChild(range);

    this.initDragger();

}

var slid1 = document.getElementById('range-slider-1');
var btn = document.getElementById('btn');
var anotherBtn = document.getElementById('anotherBtn');
var resultP = document.getElementById('results');

var rs = new rangeSlider(slid1, {
    value: 10,
});

var slid2 = document.getElementById('range-slider-2');
var rs2 = new rangeSlider(slid2, {
    value: 20,
});


btn.onclick = function() {
    rs.setValue(50);
}
anotherBtn.onclick = function() {
    document.getElementById('results').innerHTML = "Range 1: " + rs.getValue() + '<br/>Range2: ' + rs2.getValue();
}

而且此html还：

<div id="range-slider-1"></div>
<button id="btn">Set Value</button>
<button id="anotherBtn">Get Value</button>
<div id="range-slider-2"></div>
<p id="results"></p>

就像其他海报所说的那样，您需要稍微修复一下功能。我没有时间清理新代码，但是我相信您会明白的。请记住以下几点：

1. 您想通过调用新的rangeSlider创建一个新对象。
2. 您可以将新对象分配给变量，以便可以使用该变量来设置或获取值。
3. 注意var this_ = this语句，因此我们甚至在某些事件中也可以访问对象实例，因为这些事件中的this可能是DOM中的实际元素。
4. 这种新方法与原始代码一样，支持文档中的多个滑块，但是获取和设置值要简单得多，也更干净。

我敢肯定，我们可以进一步清理此代码，请尽情享受。