标签: jquery-ui-slider

我认为滑块的基本语法是:

<div id="slider"></div>

$("#slider").slider()

但这并没有成为一个可见的滑块.检查div元素,我看到应用了一些样式,但滑块不可见.

这是一个小提琴:http://jsfiddle.net/yqNcn/

我使用以下代码滑块

Css和Jquery:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

ASPX:

<p>
   <label for="amount">Value:</label> 
   <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />%
</p> 
<div id="slider-vertical" style="height: 15px; width:800px"></div>
<script type="text/javascript">
    $(function () {
        $("#slider-vertical").slider({
            orientation: "horizantal", range: "min", min: 0, max: 100, value: 60,
            slide: function (event, ui)
            { $("#amount").val(ui.value); }
        });
        $("#amount").val($("#slider-vertical").slider("value"));
    });
</script>

我正在尝试设置滑块的值:

function UpdateSlider(PhaseInStatusReportVal) {
    $("#slider-vertical").slider("value").val(PhaseInStatusReportVal);
}

我在上面调用代码来代码:

ClientScript.RegisterStartupScript(Me.GetType(), "updatetheslider", "UpdateSlider('" + BCOMSPackageValidationList(0).PhaseInStatusReport.ToString() + "')", True)

但它抛出了上述错误.

谁能帮帮我吗？

我有一个jQuery UI滑块:

$('div.slider').slider({
    range: true,
    step: 250,
    min: 1000,
    max: 500000,
    values: [1000,500000],
    change: function(event, ui){
        console.log($(this).slider('values', 0)+','+$(this).slider('values', 1));
    },
    slide: function(event, ui){
        console.log($(this).slider('values', 0)+','+$(this).slider('values', 1));
    }
});

由于一些奇怪的原因,当释放滑块(mouseup)时,值会略微改变.幻灯片事件返回的内容与更改事件的内容不同.任何人都有任何想法可能导致这个以及如何解决它？

我将在更改事件的回调中进行非常激烈的操作(意味着我不能只使用sldie),但还需要显示滑块的值,所以我不能只使用一个或者其他.

这是一个动作中这个奇怪的小提琴:http://jsfiddle.net/5W6Zh/

提前致谢

我正在使用jQuery UI滑块.

这是我正在使用的代码:

$(function() {
        $( "#slider" ).slider({
            value:1,
            min: 0,
            max: 5,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.value );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
    });

将有5个步骤,我想在每个步骤中显示字符串而不是数字:

1=very sad
2=sad
3=not so sad
4=happy
5=very happy

我怎样才能做到这一点 ？

我有这个简单的jQuery UI Slider设置,它有一个范围和两个重叠的默认值.在这个jsfiddle中可以找到整个东西(有一些铃声和口哨声):http://jsfiddle.net/yijiang/XeyGS/

$('#slider').slider({
    min: 1,
    max: 11,
    range: true,
    values: [4, 4]
});

这样做的问题是,当您尝试向右拖动单个可见句柄时,它会失败,因为jQuery UI总是将最小句柄置于顶部.出于多种原因,这显然是不好的.

有没有办法允许jQuery UI根据用户开始拖动的方向选择要拖动的句柄？

我是Javascript和JQuery的新手,我正在尝试使用JQuery UI Slider替换我的一个网站的价格范围下拉框(一个用于最低价格,另一个用于最高价格).

这是我目前的代码:

$(function() {
var slider = $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 2500000,
    step: 1000,
    values: [ 0, 2500000 ],
    slide: function( event, ui ) {
            $( "#amount" ).val( "RM " + commafy(ui.values[ 0 ]) + "  to  RM " + commafy(ui.values[ 1 ]) );
    }
});
    $( "#amount" ).val( "RM " + commafy($( "#slider-range" ).slider( "values", 0 )) +
"  to  RM " + commafy($( "#slider-range" ).slider( "values", 1 )) );
    function commafy(val) { …

我用查询/滑块创建了一个滑块,并用css设置了它.(http://jsfiddle.net/9qwmX/)

我成功地将所选值放入div容器中; 但现在我希望容器与滑块"相关".我试图使用ui.handle和它的css left属性,这是一个百分比.但这种行为有点奇怪:有时它会在滑块的左侧移动,有时偏移量为10px.

问题:有没有人知道一个好方法让包含滑动值的盒子随手柄移动？

我正在尝试将控制按钮添加到jQuery UI滑块上但无法使其工作.

任何人都可以看到我在这里做错了什么:

$(function() {

    var gmin = 1;
    var gmax = 500;

    $( "#slider" ).slider({
        value:5,
        min: gmin,
        max: gmax,
        step: 1,
        slide: function( event, ui ) {
            $( "#donate_amount_label span" ).html( "£" + ui.value );
        }
    });

    $( "#donate_amount_label span" ).html( "£" + $( "#slider" ).slider( "value" ) );
    $( "#" ).val( $( "#slider" ).slider( "value" ) );

    $('#down').click(function() {

      var s = $("#slider");
      s.slider('value', s.slider('value') + s.slider( "step" ) );   

    });

});

滑块工作正常并且值得到更新,但是当您单击#down链接时,滚动条没有任何反应.我希望在单击#down链接时向上移动一步.

谢谢皮特

我需要一个带有两个手柄的jquery滑块,其中包含来自两个文本框的输入,如http://www.israel-diamonds.com/search/diamonds/default.aspx.目前我有一个单手柄滑块,单个文本框输入

$("#slider").slider({
    value: 1,
    step: 1000,
    min: 0,
    max: 5000000,
    slide: function(event, ui) {
        $("input").val("$" + ui.value);
    }
});
$("input").change(function () {
    var value = this.value.substring(1);
    console.log(value);
    $("#slider").slider("value", parseInt(value));
});

有什么建议吗？

编辑:

<div class="demo">
    <input type="text" class="sliderValue"  />
        <p>
        </p>
        <div id="slider"></div>
    </div>

和

  $("#slider").slider({
        range: "min",
        value: 1,
        step: 10,
        min: 0,
        max: 1000,
        slide: function (event, ui) {
            $("input").val(ui.value);
        }
    });


    $("input").change(function (event) {
        var value1 = parseFloat($("input").val());
        var highVal = value1 * 2;
        $("#slider").slider("option", { …

我有一个滑块用作我的音乐播放器中的时间线.最小值为0,最大值为歌曲长度(以秒为单位).每秒(我用计时器做),滑块移动,值设置为当前时间.此代码行看起来像这样:

$("#sliderTime").slider("option", "value", document.sound.controls.currentPosition);

用户可以滑动/单击滑块并跳转到歌曲中的另一个点,这是通过触发"play(startPlayFromHere)"功能.它看起来像这样:

$("#sliderTime").slider({
   ...
  change: function (event, ui) { play(ui.value) },
});

问题是计时器中的代码行和用户都调用了滑块​​的相同"更改"事件,并且用户无法移动滑块.

所以我的问题是如何确定用户是否调用了更改事件(这意味着它是计时器)？

我希望它足够清楚,谢谢!