直接将值设置为滑块

2022-01-24 00:00:00 slider javascript

Javascript 对我来说是一门新的语言，所以这是一个我无法完成的简单任务.当我更改滑块时，我可以设置滑块并更新元素的位置:

Javascript is a new languaje for me so this is a simple task that I cannot achieve. I can set the slider and update the position of my element when I change the slider with:

// 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();
  };
}

但现在我只想设置滑块的值(因为我有返回默认位置的功能)，我无法做到.我尝试了很多东西，例如:

But now I want just to set the value of the slider (because I have a back to default position function), and I am no able. I tried many things, such as:

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

还有:

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

或者:

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

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

The tutorial where these UI components are used is this one:

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

ui 组件在这里，如果添加到 html 的链接可以直接使用，甚至教程本身(上面的链接)具有在 web 本身中运行滑块所需的所有代码.

And the ui componenents are here, can be used directly if link added to html, or even the tutorial itself (link above) has all the code needed to run the slider in the web itself.

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

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

Just want to manipulate the value of the slider directly. Any help is much appreciated, thanks

推荐答案

根据您提供的示例，我认为需要做几件事才能实现这一目标.首先，第 98 行和第 99 行的 main() 函数正在设置滑块，如下所示:

There's a couple of things that needed to be done in my opinion to achieve this based on the example you provided. First, the main() function on lines 98 and 99 is setting up the sliders like so:

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

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

如果我们检查您提供的库(大约第 99 行)，我们可以看到函数 setupSlider 返回一个对象，其中包含 html 引用和一个更新其值的函数:

If we check the library you provided (around line 99) we can see that the function setupSlider returns an object with both the html reference and a function to update its value:

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

这里的问题是代码没有将此对象分配给您访问的任何引用(变量)，因此基本上创建了元素，侦听器设置为 HTML 元素，但是当您调用 $('#x') 您访问的是 HTML 引用，而不是具有更新功能的对象.

The problem here is that the code is not assigning this object to any references (variables) that you access, so basically the elements get created, the listeners get set to the HTML elements but when you call $('#x') you are accessing the HTML reference, not the object with the update function.

所以我做的第一件事就是添加几个全局变量来存储 setupSlider 返回的对象:

So the first thing I did was to add a couple of global variables to store the returned objects from setupSlider:

let slider1,
slider2

然后我们将示例的第 99 行和第 98 行更改为存储返回的对象，如下所示:

Then we change lines 99 and 98 of the example to store the returned objects like so:

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

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

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

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

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

This allows us to access them on other functions, so I created a function that changes the value of a given slider object:

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

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

And in my case I created a timeout that calls this function after 2 seconds for simplicity but you can assign this function to a onClick event or basically anything you want.

这是我做的例子:

codepen 示例

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

If you wait a couple of seconds you should see slider x update its value to a 100, I didn't worry about updating the rest of the Ui but I figured that was outside the scope of the question.

希望对你有帮助！

相关文章