Jquery ui 滑块：html 中的值、最小值和最大值

Posted 2023-03-13

【中文标题】Jquery ui 滑块：html 中的值、最小值和最大值

【英文标题】：Jquery ui slider: value, min and max in the html

【发布时间】：2011-08-24 22:02:06

【问题描述】：

我正在使用 jquery-ui 制作一些滑块，但我有一个问题，我该如何执行以下操作：

我有这个 html 代码：

<div class="slider range-slide">
    <b>A range slider:</b>
    <span class="amount"></span>
    <div class="slide"></div> 
</div> 

这是js：

$(".range-slide").each(function () 
    var $this = $(this);
    $(".slide", $this).slider(
        values: [30, 60],
        min: 0,
        max: 100,
        range: true,
        slide: function (event, ui) 
            $("span.amount", $this).html("" + ui.values[0] + 
                                         " - " + ui.values[1]);
        
    );
    $(".range-slide span.amount").html("" + $(".slide").slider("values", 0) + 
                                       " - " + $(".slide").slider("values", 1));
);   

一切都很好，但我怎么能做这样的事情：

<div class="slider range-slide">
    <b>A range slider:</b>
    <span class="amount"></span>
    <div class="slide" value="30,60" max="100" min="10"></div> 
</div> 

【参考方案1】：

更改您的滑块以使用这些值。

$(".slide", $this).slider(
    values: [30, 60],
    min: $(this).attr('min'),
    max: $(this).attr('max'),
    range: true,
    slide: function(event, ui) 
        $("span.amount", $this).html("" + ui.values[0] + " - " + ui.values[1]);
    
);

更新： 查看this fiddle

$(".range-slide div.slide").each(function() 
$(this).slider(
    values: [30, 60],
    min: parseInt($(this).attr('min')),
    max:  parseInt($(this).attr('max')),
    range: true,
    slide: function(event, ui) 
        $("span.amount", $(this).parent()).html("" + ui.values[0] + " - " + ui.values[1]);
    
);
$(".range-slide span.amount").html("" + $(this).slider("values", 0) + " - " + $(this).slider("values", 1));
);

更新 2 使用 split 以逗号分隔值并将它们分配给变量。 Fiddle

$(".range-slide div.slide").each(function() 
    values = $(this).attr('value').split(',');
   firstVal = values[0];
    secondVal = values[1];


    $(this).slider(
        values: [firstVal , secondVal],
        min: parseInt($(this).attr('min')),
        max:  parseInt($(this).attr('max')),
        range: true,
        slide: function(event, ui) 
            $("span.amount", $(this).parent()).html("" + ui.values[0] + " - " + ui.values[1]);
        
    );
    $(".range-slide span.amount").html("" + $(this).slider("values", 0) + " - " + $(this).slider("values", 1));
    );

【讨论】：

对不起，伙计，这不起作用:-(...以及我想在 HTML 中设置的值。

嗨，Amin Eshaq，这行得通，但是值怎么样，我该怎么做呢？

嗨，Amin，它工作得很好，但值......我该如何设置它们？ （值：[30, 60]）我想要在 HTML 中的那个：），谢谢帮助！

确实有效。我已经检查了小提琴并用拆分值测试了自己。我认为，第一个版本会导致对 $(this) 的引用出现问题。

Amin Eshaq 检查一下：jsfiddle.net/ZwG9Q 开头的值是相同的，但在 HTML 中却不是……这怎么可能？

【参考方案2】：

未经测试...

$(".range-slide").each(function() 
var $this = $(this);
$(".slide", $this).slider(
    values: $(this).attr('value').split(','),
    min: $(this).attr('min'),
    max: $(this).attr('max'),
    range: true,
    slide: function(event, ui) 
        $("span.amount", $this).html("" + ui.values[0] + " - " + ui.values[1]);
    
);
$(".range-slide span.amount").html("" + $(".slide").slider("values", 0) + " - " + $(".slide").slider("values", 1));
);

【讨论】：

HBublitz 也一样...这不起作用，我收到一个错误 Uncaught TypeError: Cannot call method 'split' of undefined