Установить значение слайдера напрямую

Question

Javascript - это новый для меня язык, поэтому я не могу выполнить эту простую задачу. Я могу установить ползунок и обновить положение своего элемента, когда я меняю ползунок с помощью:

// Setup a ui.
webglLessonsUI.setupSlider("#x", {slide: updatePosition(0), max: gl.canvas.width });
webglLessonsUI.setupSlider("#y", {slide: updatePosition(1), max: gl.canvas.height});

Где позиция обновления:

function updatePosition(index) {
  return function(event, ui) {
    translation[index] = ui.value;
    drawScene();
  };
}

Но теперь я хочу просто установить значение ползунка (потому что у меня есть функция возврата в положение по умолчанию), и я не могу. Я пробовал много вещей, например:

webglLessonsUI.UpdateUI($('#x'), 0);

И:

$('#x').value = 0;

Или:

$('#x').slide = 0;

Учебное пособие, в котором используются эти компоненты пользовательского интерфейса, - это одно. :

https://webgl2fundamentals.org/webgl/lessons/webgl-2d-translation.html

И компоненты пользовательского интерфейса находятся здесь, их можно использовать напрямую, если ссылка добавлена ​​в html, или даже само руководство (ссылка выше) содержит весь код, необходимый для запуска ползунка в самой сети.

https://webgl2fundamentals.org/webgl/resources/webgl-lessons-ui.js

Просто хочу напрямую управлять значением ползунка. Любая помощь очень ценится, спасибо

Answer 1

Есть несколько вещей, которые, на мой взгляд, необходимо сделать для достижения этой цели на основе приведенного вами примера. Сначала функция main() в строках 98 и 99 устанавливает ползунки следующим образом:

webglLessonsUI.setupSlider ("# x", {slide: updatePosition (0), max: gl.canvas.width }); webglLessonsUI.setupSlider ("# y", {slide: updatePosition (1), max: gl.canvas.height});

Если мы проверим предоставленную вами библиотеку (около строки 99), мы увидим, что функция setupSlider возвращает объект со ссылкой html и функцией для обновления его значения:

    return {
  elem: parent,
  updateValue: (v) => {
    v /= step;
    sliderElem.value = v;
    updateValue(v);
  },
};

Проблема здесь в том, что код не назначает этот объект никаким ссылкам (переменным), которые вы получаете доступ, поэтому в основном создаются элементы, слушатели устанавливаются на элементы HTML, но когда вы вызываете $('#x'), вы получаете доступ к ссылке HTML, а не к объекту с функцией обновления.

Итак, первое, что я сделал, - это добавил пару глобальных переменных для хранения возвращенных объектов из setupSlider:

let slider1,
slider2

Затем мы изменим строки 99 и 98 примера, чтобы сохранить возвращенные объекты следующим образом :

slider1 = webglLessonsUI.setupSlider ("# x", {slide: updatePosition (0), max: gl.canvas.width});

slider2 = webglLessonsUI.setupSlider ("# y ", {слайд: updatePosition ( 1), max: gl.canvas.height});

Это позволяет нам обращаться к ним в других функциях, поэтому я создал функцию, которая изменяет значение данного объекта ползунка:

function updateSlider(slider, value) {slider.updateValue(value)}

И в моем случае я создал тайм-аут, который вызывает эту функцию через 2 секунды для простоты, но вы можете назначить эту функцию событию onClick или вообще чему угодно.

Вот пример, который я сделал:

Пример на коде

Если вы подождете пару секунд, вы увидите, что ползунок x обновляет свое значение до 100, я не беспокоился об обновлении остальной части Ui, но я решил, что это выходит за рамки вопроса.

Надеюсь, это поможет!