如何将HTML滑动条中的元素转换为JavaScript变量

我有这个工作脚本。它只是简单地循环、对象和显示 HTML中的对象键作为滑动条

jQuery（函数（$）{
$（“#阈值”）.change（updateThreshold）；
函数updateThreshold（）{
var thresholdinex=parseInt（$（'#threshold'）.val（），10）；
$（“#foldchange_threshold”）.html（foldchange_thresholds[thresholdIndex]）；
};
var foldchange_阈值=[]；
var mydata={“3”：[“c”，“d”]，“3.5”：[“j”，“k”]，“1.5”：[“a”，“b”]，“2.5”：[“x”，“y”]；
Object.keys（mydata）.sort（）.forEach（函数（键）{
foldchange_阈值。按下（键）；
});
$（“#阈值”）.attr（'max'，foldchange_阈值.length-1）；
});



您是否尝试过使用
.slider
功能

我举了一个小例子来获取console.log的值，在下面的例子中，我使用了
jqueryui.min.js
和
jqueryui.css
，这样您就可以使用
.slider

幻灯片：
-
本节将在
控制台中显示
3
值。log

change:
-本节将把
foldchange\u阈值中的值显示为
3.5

storedElementValue
-我创建了一个
global
变量来存储
ui.value
的值供以后使用

.css（）
-您可以添加
.css（）
以快速添加元素样式的值，也可以使用
.addClass（）
向滑块添加类，然后在
css
样式表中更改样式


//用于存储滑块元素值的全局变量
var storedElementValue=0；
$（函数（$）{
var foldchange_阈值=[]；
var mydata={
“3”：[“c”、“d”]，
“3.5”：[“j”，“k”]，
“1.5”：[“a”、“b”]，
“2.5”：[“x”，“y”]
};
Object.keys（mydata）.sort（）.forEach（函数（键）{
foldchange_阈值。按下（键）；
});
$（“#阈值”）.滑块({
最小值：0，//最小值
max:foldchange\u thresholds.length-1，//最大值
步骤：1，
值：0，//滑块的默认值
幻灯片：功能（e、ui）{
//显示元素值的控制台日志
console.log（ui.value）；
storedElementValue=ui.value；
},
更改：功能（e、ui）{
var thresholdIndex=parseInt（ui.value，10）；
$（“#foldchange_threshold”）.html（foldchange_thresholds[thresholdIndex]）；
$（“#foldchange_threshold_storedValue”）.html（“以后使用的存储值：”+storedElementValue）；
}
}).css（“宽度”，“200px”）；
});





无需外部插件，jQuery就足够了-您可以连接自己的
mousedown
、
mousemove
、
mouseup
组合，在拖动时读取范围输入：


编辑：

Afetr此处的一些注释是工作示例的更新，该示例在拖动时将值保存到“全局”变量：

谢谢。但是我需要存储
console.log（ui.value）的值在变量中。稍后将把该变量传递给函数。我该怎么做？@neversaint不要检查我的更新答案，我已经制作了一个额外的元素，名为
foldchange\u threshold\u storedValue
，以显示为以后存储的值use@neversaint如果还有其他问题，只要问：）我能把滑块缩短一点吗？不管步数。@neversaint我已经更新了答案，向您展示了如何更改滑块的样式（滑块长度，不管步数），谢谢，但我需要存储
console.log（$（this.val（））
转换为变量，稍后将其传递给函数。我该怎么做？@Shlomo:谢谢。您介意在中更新您的演示吗。您可以使用
CTRL-m
来启用。仅为我启用JSnippet-以下是一个更新：
   $(function() {  

     //Global variable that holds the value and updates while dragging.
     var valueTemp = 0;

     //Events functions:
     var changeEvent = function(){
         var thresholdIndex = parseInt($('#threshold').val(), 10);
         $("#foldchange_threshold").html($(this).val());
     };
     var downEvent = function(){
         $(this).bind('mousemove',moveEvent);
     };
     var moveEvent = function(){
         //trigger the change or comment it and do what ever you want:
         $(this).trigger('change');

         //Store the value into a variable available by other functions as asked in the comments:
         valueTemp = $(this).val();
         console.log($(this).val());
     };
     var upEvent = function(){
         $(this).unbind('mousemove');
     };
     
     //Bind events - mousemove is bind and unbind by the mousedown & mouseup events.
     $('#threshold').change(changeEvent);
     $('#threshold').mousedown(downEvent);
     $('#threshold').mouseup(upEvent);
  });