¿Cómo puede el usuario activar enlaces sin hacer clic en el botón 'Llévame a mi objeto ideal'? o ¿cómo puede el usuario abrir un enlace en el cambio de valor del control deslizante o en mouseup? Básicamente, el usuario desliza la bola y el mouse hacia arriba para abrir ese enlace de rango.
// 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>Los controles deslizantes de rango son un poco extraños , pero está en el camino correcto: ¿por qué no cambiar su función 'oninput' y usar [ addEventListener ] para escuchar un evento de change (en lugar de un evento de input )?
De la misma manera que actualizó el valor del tramo tierslider2 , puede llamar a su función de redirección cuando se active este evento. Los controladores de eventos son solo eso: puede ejecutar su propio código de manejo de eventos personalizado en ellos.
// 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>