Get or set variable from another function

Paste this javascript into the original fiddle and sett it working:

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();
}

And this html also:

<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>

Like some of the other posters said, you need to fix your function a bit. I don't have time to clean up the new code, but I'm sure you'll get the idea. Here are a few things to keep in mind:

1. You want to create a new object by calling new rangeSlider.
2. You can assign the new object to a variable so you can use that variable to set or get values.
3. Notice the var this_ = this statement so we'll have access to the object instance even certain events, because the this in those events may be the actual elements in the DOM.
4. This new approach supports the multiple sliders in the document, as with your original code, but it is a lot more simpler and cleaner to get and set values.

I'm sure we can clean this code a lot more, so enjoy.