How can user trigger links without clicking the button 'Take me to my ideal object!' or how can user open a link on slider value change or on mouseup ? Basically user Slide the ball and mouse up to open that range link.
// Setting custom points to slider
var values = [0, 1000,2000,4000,10000];
var input = document.getElementById('tierslider'),
output = document.getElementById('tierslider2');
input.oninput = function(){
output.innerHTML = values[this.value];
};
input.oninput();
// Redirect
function redirectToLinks(elem){
window.location.href = elem.dataset.baselink + values[input.value];
}<div id='slidecontainer'>
<form>
<span>500</span>
<input type='range' min='0' max='4' value="0" step="1" id='tierslider'>
<span>10000</span>
<span id='tierslider2'></span>
</form>
</div>
<a href='#' data-baselink='http://www.example.com/page?param=' id='DisplaySliderResult' onclick="redirectToLinks(this)">Take me to my ideal object!</a>Range sliders are kind of weird, but you're on the right track - why not change your 'oninput' function and use [addEventListener] to listen to a change event (instead of an input event)?
In the same way you've updated the value of the tierslider2 span, you can call you redirect function when this event fires. Event handlers are just that - you get to run your own custom event handling code in them.
// Setting custom points to slider
var values = [0, 1000,2000,4000,10000];
var input = document.getElementById('tierslider'),
output = document.getElementById('tierslider2'),
myLink = document.getElementById('DisplaySliderResult');
// Redirect
function redirectToLinks(elem){
window.location.href = elem.dataset.baselink + values[input.value];
}
input.addEventListener('change', function() {
// you've already 'handled' this event - now just do what you want! in your case, redirect the user to some other place without them clicking the link
output.innerHTML = values[this.value];
redirectToLinks(myLink);
});<div id='slidecontainer'>
<form>
<span>500</span>
<input type='range' min='0' max='4' value="0" step="1" id='tierslider'>
<span>10000</span>
<span id='tierslider2'></span>
</form>
</div>
<a href='#' data-baselink='http://www.example.com/page?param=' id='DisplaySliderResult' onclick="redirectToLinks(this)">Click to take me to my ideal object!</a>