标签: jquery-ui-slider

我想知道是否有人找到了一个解决方案或示例来实际填充滑块的输入框并将其滑动到适当的位置onBlur()..目前,众所周知,它只是用您所在的位置更新此值在.所以在某些方面,我试图扭转这个惊人的滑块的功能.

我找到的一个链接:http://www.webdeveloper.com/forum/archive/index.php/t-177578.html有点过时了,但看起来他们试了一下.但是,结果的链接不存在.我希望那里可能有一个解决方案.

我知道长丝具有重新设计的滑块来处理选择(下拉)的值,它完美的作品.所以目标会做同样的,但有一个输入文本框.

如果我们将click事件绑定到链接为

$("linkSelector").click(function(){ ... });

那么即使用户没有点击链接,我们也可以轻松强制执行此事件处理程序.

$("linkSelector").click(function() { ... }).click();

但在我的情况下,我正在使用jQuery Slider小部件,它具有slide可以绑定事件处理程序的事件.我想知道我们如何以编程方式强制执行其事件？

我试过跟随,但没有一个有效:

$("sliderSelector").slider({ slide: function(){ ... } }).slide();
$("sliderSelector").slider({ slide: function(){ ... } }).slider("slide");
$("sliderSelector").slider({ slide: function(){ ... } }).trigger("slide");

我知道我可以使用命名函数而不是匿名函数,但我不认为这是一个解决方案,因为我可以使用我想要的任何参数调用函数,而触发slide事件将提供滑块设置的正确值.

我正在使用Jquery UI滑块允许用户增加/减少选择范围,我需要知道(根据滑块的原始值)用户是想增加还是减少.

这是我的函数,我不知道在更改之前将代码放在哪里检索原始值.谁能帮我这个？

任何帮助/建议表示赞赏!

function createRangeSliderOutOfIframe(kinorid) {
    $("#slider-range" + kinorid).slider({
        animate: true,
        step: 1,
        min: 1,
        max: 6,
        value: 1,

        slide: function (event, ui) {

        },
        change: function (event, ui) {
            if (ui.value >= 1) {

                var add = '<span class="kSelectedA">Link</span>';

                $("#myFrame").contents().find('*').each(function () {
                    if ($(this).attr('kinorid') == kinorid) {
                        if (count == 0) {
                            $(result).parent().before(add);
                            count += 1;
                        }  
                        else if (count <= 6 && count != 0) {
                            result = $(this).parent();
                            for (i = 0; i < count; i++) …

我正在尝试使用Jquery UI滑块,我可以在其中有多个句柄:

$(function () {
        var handlers = [25, 50, 75];
        $("#slider").slider({
            min: 0,
            max: 100,
            values: handlers,
            slide: function (evt, ui) {
                for (var i = 0, l = ui.values.length; i < l; i++) {
                    if (i !== l - 1 && ui.values[i] > ui.values[i + 1]) {
                        return false;
                    }
                    else if (i === 0 && ui.values[i] < ui.values[i - 1]) {
                        return false;
                    }
                }
            }
        });
    });

请注意,一个处理程序不能重叠,我需要在加载时动态设置处理程序,并在更改时保存处理程序位置.

我想要完成的事情是将处理程序之间的ui内容着色为不同的颜色.我附上了一张图片.

如果可能的话请提供建议.

我写了类似下面的内容.点击ID为"PLUS"的div,我收到以下错误:

cannot call methods on slider prior to initialization attempted to call method 'value'

<div id="PLUS" class="PLUS"></div>
<script>
  $(function() {
    $(".slider").slider({
      animate: true,
      range: "min",
      value: 18,
      min: 18,
      max: 70,
      step: 1,
      slide: function(event, ui) {
        $("#slider-result").html(ui.value);
        document.getElementById(findElement('ageId')).value = ui.value;
      },
      //this updates the hidden form field so we can submit the data using a form
      change: function(event, ui) {
        $('#hidden').attr('value', ui.value);
      }
    });

    $(".PLUS").click(function() {
      var value = $("#slider-result").slider("value"),
        step = $("#slider-result").slider("option", "step");
      $("#slider-result").slider("value", value + step);
    }); …

是否可以设置jQuery-UI Slider小部件的背景颜色(通过JavaScript)？

这个是正常的:

我希望实现的目标如下:

绿色范围将根据历史数据计算.我想向用户表明什么是"健康"范围.

提前感谢任何指针.

我有一个页面上有多个jQuery UI滑块.滑块需要具有默认值.例如,当有人来到我的表单时,设置滑块,提交表单但是他们得到一个错误,滑块不应该重置为0.我们填写的表单的所有先前元素应该保留在原位.我知道您可以为滑块设置默认值,但我无法使用多个滑块.

我想要做的是从输入字段中取值并将其用作范围滑块的默认值.您可以在下面的jsfiddle中看到我将输入的值设置为2和4.当您加载页面时,滑块都会在2处转到相同的位置.

不知何故,我需要告诉滑块获取直接位于其下方的输入值,并将其用作默认值.

关于如何做到这一点的任何想法？

http://jsfiddle.net/dmcgrew/EquTn/3/

HTML:

<div class="kpa_rate kpa_rate1">
    <label for="kpa1_rating_value">Rating 1:</label>

    <div id="1" class="slider"></div>
    <input type="text" class="kpa1_rating_value" name="kpa1_rating" value="2" />       
</div>


<div class="kpa_rate kpa_rate2">
    <label for="kpa2_rating_value">Rating 2:</label>

    <div id="2" class="slider"></div>
    <input type="text" class="kpa2_rating_value" name="kpa2_rating" value="4" />
</div>

JS:

$(function() {
    $( ".slider" ).slider({
 range: "max",
 min: 0,
 max: 5,
 value: $("input", this).val(),
 slide: function( event, ui ) {                 
     //get the id of this slider
     var id = $(this).attr("id");
     //select the input box that has the same id as …

我有一点问题,我正在使用localstorage并加载一个值,我的想法是滑块随该值改变.我得到了正确的负载部分,它加载了我想要的数字(我可以在警报中显示它,所以我知道是可以的),但是当试图将滑块添加到该数字时,它只保留dafult值(我尝试停用它,问题是一样的).页面就绪时运行该方法这是代码:

function mostrarValoresOpcionesGuardados()
{

    var localStorageKey1 = "nombreUsuario";
    var localStorageKey2 = "pesoUsuario";
    var localStorageKey3 = "alturaUsuario";
    var localStorageKey4 = "edadUsuario";
    var nombre = localStorage.getItem(localStorageKey1);
    var peso = localStorage.getItem(localStorageKey2);
    var altura = localStorage.getItem(localStorageKey3);
    var edad = localStorage.getItem(localStorageKey4);
    $("#nombreUsuarioOpciones").val(nombre);
    $("#pesoUsuario").val(peso).slider("refresh"); //this doesn't work
    $("#alturaUsuario").val(altura);
    $("#edadUsuario").val(edad);
    alert(nombre+" "+peso+" "+altura+" "+edad);
};

我也尝试过这种方式: $("#pesoUsuario").val(peso); $("#pesoUsuario).slider("refresh")); 但它也没有用.这是滑块的div:

<div data-role="fieldcontain">
        <label for="pesoUsuario">
            Peso (kg)
        </label>
        <input id="pesoUsuario" type="range" name="pesoUsuario" value="95" min="0"
        max="200" data-highlight="true">
    </div>

嘿我有一些叫做"lp-slider"的jquery滑块设置如下:

                 <div class="xs-col-12">
                        <div class="col-xs-2 label label-default">Grit</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>
                    <div class="xs-col-12 spacer-med">
                        <div class="col-xs-2 label label-default">Self-efficacy</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>
                    <div class="xs-col-12 spacer-med">
                        <div class="col-xs-2 label label-default">Sociability</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>

我想在它们上运行每个语句,以便它抓取data属性并使用它来设置滑块值.我试过这个,我似乎无法弄清楚如何让它工作.它设置滑块但值部分无法正常工作:

$(".lp-slider").each(function() {
    var value = $(this).data("lpScore");
    $(this).slider({
        value:value,
        range:"min",
        min:1,
        max:100,
        step:1
    });
});

我使用了一个 jQuery 插件 UI Slider - https://jqueryui.com/slider/ 我需要一些帮助来将它修改为这个视图

句柄应该是单一的，当句柄从中心移动到最大值或最小值时，应该出现范围蓝线我找不到任何解决方案。：（ 谁能帮我这个？

UPD：我只需要一个带有一个手柄的滑块，它从中间开始，应该向右或向左滑动。