直接给滑块设置值

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;

使用这些 UI 组件的教程是这个：

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

和ui组件在这里，如果link添加到html，可以直接使用，甚至教程本身（link上面）都有运行 Web 本身的滑块所需的代码。

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

只想直接操作滑块的值。非常感谢任何帮助，谢谢

Answer 1

根据您提供的示例，我认为需要做几件事才能实现这一目标。首先，第 98 行和第 99 行的 main() 函数像这样设置滑块：

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

如果我们检查您提供的库（大约第 99 行），我们可以看到函数 setupSlider returns 是一个包含 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", {slide: updatePosition(1), max: gl.canvas.height});

这允许我们在其他函数上访问它们，因此我创建了一个函数来更改给定滑块对象的值：

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

在我的例子中，为简单起见，我创建了一个在 2 秒后调用此函数的超时，但您可以将此函数分配给 onClick 事件或基本上任何您想要的。

这是我做的例子：

Example on codepen

如果您等待几秒钟，您应该会看到滑块 x 将其值更新为 100，我并不担心更新 Ui 的其余部分，但我认为这超出了问题。

希望对您有所帮助！

直接给滑块设置值

Set value to slider directly

javascript

slider