1

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>
Govind Singh Rathore
  • 13
  • 3

1 Answers1

0

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>
Brendan Bond
  • 1,737
  • 1
  • 10
  • 8
  • Thank you very much @Brendan Bond sir, It works for me. I'm using this to trigger servo position in esp32 without async server in AP mode. But I have still an issue with this is, when esp32 generates new example page by sliding,but on new example page slider value label (tierslider2) became default that is 0. – Govind Singh Rathore Jan 01 '22 at 22:32
  • I am developing this code for my application to run a servo in ESP32 Access point mode without asynchronous web server and without ajax query. Ref-https://youtu.be/_WqfNyE_pt8. Code link-https://randomnerdtutorials.com/esp32-servo-motor-web-server-arduino-ide/ – Govind Singh Rathore Jan 02 '22 at 00:22
  • @GSRathore this sounds like a new issue, please open a new question. If my answer helped you answer this particular question, please accept the answer. Thanks! – Brendan Bond Jan 02 '22 at 01:59
  • No sir, it's not new issue. I am handling local pages like http:///192.168.4.1/sliderValueToMoveServo=180 http:///192.168.4.1/sliderValueToMoveServo=90 degree to update current position of servo to next page. Reloading the same page with changed values. – Govind Singh Rathore Jan 02 '22 at 04:18