slider position controls object

[cvanheer]

I am using the html slider plugin to create a slider as per below, but I want to be able to get the x and y position of the slider button so I can use this to update the position of a separate object (a circle) on the screen. Is there a way to do this? Right now, I know how to get the slider value, but not the raw position on the canvas, if that makes sense. I had a look at the html slider canvas, but it doesn't seem to have a way to get the x position of the slider, as opposed to the value, either! Any hints would be lovely.

 var slider = '<div id="jspsych-bucket-slider-wrapper" style="margin: 0px 0px;">';
    slider += '<div id="jspsych-bucket-stimulus">' + '</div>';
    slider += '<div class="jspsych-bucket-slider-container" style="position:relative; margin: 0 auto 3em auto;';
    slider += '">'; // if you get rid of this  slider does not appear why??
    slider += '<input type="range" class="jspsych-bucket" value="'+0+'" min="'+trial.min+'" max="'+300+'" step="'+1+'" id="jspsych-bucket-slider"></input>';
    slider += '<button id="jspsych-bucket-slider-next" class="jspsych-btn" '+ (trial.require_movement ? "disabled" : "") + '>'+ 'Accept' +'</button>';

[jodeleeuw]

Hi @cvanheer,

Do you want to get the specific X coordinate of the slider, or is the value of the slider sufficient? The value should be readable with document.querySelector("#jspsych-bucket-slider").value().

The X coordinate I'm less sure about. I'm not sure if the element can be selected directly (for methods like .getClientBoundingRect()) because it is a pseudo-element. This stackoverflow post looks like it might have some relevant answers.

[cvanheer]

Hello Josh,

Thanks for the reply, and sorry about the delayed response! I need the X coordinate! Thanks for the stack post, I was wondering if there was an easier way before I went about implementing it that way - I thought that perhaps it was just a field name that I was missing but it looks like no, and I have to do it that way :) Will report back with the solution I find.