Jquery UI滑块，多值输出

本文介绍了Jquery UI滑块，多值输出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图配置一个滑块来显示多个值，一个是标准数字输出，另一个是数组中的值的输出。

I am trying to configure a slider to display multiple values with one being a standard number output and the other being an output from a value in an array.

我希望句柄中的值是标准的1-100，但下面的值对应一个自定义数组我会定义。

I would like the values in the handle to be the standard 1-100 but the values underneath to correspond with a custom array that I would define.

换句话说，我如何链接

$("#amount").html(value);

输出类似以下的数组：

[1=15,2=23,3=26,4=32,5=39]

等等？

推荐答案

var ageInput = $("#ageInput"),
    initialValue = 1,
    values = [];

values = ['',15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39];

var updateSliderValue = function (e, ui) {
    var slider = $(this).data().slider;
    var index = ui.value || 0;
    if (index) {
        $("#amount").html(index + "=" + values[index]);
        slider.element.find(".ui-slider-handle").text(slider.value());
    }
};

var value = $("#slider").slider("value");
$("#amount").html(value);


ageInput.slider({
    min: 0,
    max: 100,
    slide: updateSliderValue,
    create: updateSliderValue,
    value: initialValue
});

这篇关于Jquery UI滑块，多值输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！