Слайдер JQuery UI: значение, мин и макс в HTML

Question

Я делаю несколько слайдеров с помощью 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));
});   

Everyting работает нормально, но как я могу сделать что-то вроде этого:

<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> 

Answer 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]);
    }
});

ОБНОВЛЕНО: Проверьте эту скрипку

$(".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 Используйте разделение, чтобы разделить значения запятыми и назначить их переменным. скрипка

$(".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));
    });

Answer 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));
});