标签: slider

jQuery 1.3.2/jQueryUI 1.7/Slider

$("#slider").slider({
    range: "min",
    min: 0,
    max: 40,
    value: 0,
    slide: function(event, ui) {
        CalculateOrder(event, ui);
    }
});

它开始就好了,但在我移动滑块后我无法将其恢复为0,ui.Value为1,当我一直滑到左边.

我试过设定

min:-1

当我将它滑动到-1时,这会将ui.Value设置为-1,但是当我在0时,ui.Value仍为1.

有任何想法吗？

我为我的Slider启用了IsMoveToPointEnabled,所以当我单击组件上的任何位置时,选择器会移动到我的鼠标.问题是如果我打开此选项并单击并按住鼠标以拖动选择器,选择器不会移动.有人知道怎么修这个东西吗？

在jQuery-UI Slider箭头键移动滑块手柄(在选择/单击手柄后),这很好,但我不希望滑块处理键盘(我在页面上使用箭头键为另一个purpouse).

任何想法如何禁用jquery-ui滑块的键盘事件？

我的SeekBar(滑块)工作正常但是,当我滑动手指时,它会递增/递减1,但是,我想将增量值更改为常量,例如5.我尝试使用

slider.incrementProgressBy(5);

要做到但是,它不起作用(注意:我把它放在动作监听器内外的不同位置,但它不起作用).

以下是与此相关的两行:

slider.incrementProgressBy(5);
validBpm = slider.getProgress();

这些线目前在SeekBar的触控听众中.

我想这很简单,我忽略了显而易见的 - 任何建议？谢谢...

我正在测试jQueryMobile中的滑块事件,我一定错过了什么.

页面代码是:

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

如果我这样做:

$("#slider").data("events");

我明白了

blur, focus, keyup, remove

我想要做的是在用户释放滑块手柄后获取值

和keyup事件挂钩

$("#slider").bind("keyup", function() { alert('here'); } );

什么都不做:(

我必须说我错误地认为 jQueryMobile使用了jQueryUI控件,因为这是我的第一个想法,但是现在深入研究事件,我看到的情况并非如此,只是在CSS设计方面.

我能做什么？

jQuery Mobile Slider 源代码可以在Git上找到,如果它可以帮助任何人以及在JSBin上找到测试页面

据我所知,这#slider是带有值的文本框,所以我需要挂钩滑块手柄,因为此滑块的生成代码是:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label for="slider" class="ui-input-text ui-slider" id="slider-label">Input slider:</label>
    <input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" …

我想创建一个滑动按钮(=某些东西作为开关),有两种状态:打开和关闭,因此用户必须按下按钮并滑动它以更改状态(类似于解锁滑块但不跨越整个屏幕).你知道怎么做吗？我真的试图找到答案,但我没有成功.

非常感谢!

所以我有一个页面,上面有一个jquery ui滑块,用以下内容初始化:

var min = $("#attrInformation").data("lowest_price"),
max = $("#attrInformation").data("highest_price");

    $( "#slider-range" ).slider({
        range: true,
        min: min,
        max: max,
        values: [ min, max ],
        slide: function( event, ui ) {
            var start = ui.values[0],
            end = ui.values[1];

            $("#startPrice").text(start);
            $("#endPrice").text(end);
        },
        stop: function(event,ui){
            var start = ui.values[0],
            end = ui.values[1];

            refineObject.price_min = start;
            refineObject.price_max = end;

            refineResults(refineObject);
        }
    });

我希望能够根据ajax调用的结果更改最小值,最大值和两个句柄所在的值.所以我尝试过这样的事情:

    $.get("ajax.php",options,function(data){
    $('.middle_container').html(data);          

    $('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
    $('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
    $('#slider-range').slider("value", $('#slider-range').slider("value"));

        });

我的min和max包含在两个隐藏的div中,其中包含类start_price和end_price.这当前不起作用,它不会更新最高价格,并且滑块的右手柄出现在左侧位置上方.关于如何使这项工作的任何建议？我正在使用php作为后端.start_price和end_price代码正常工作.

我在MATLAB 2012a中使用GUIDE创建了一个滑块小部件.我希望它控制一个显示图像的轴,其中滑块逐步执行它们的序列.

我在m文件的一部分中为Min,Max和SliderStep设置了滑块的属性.

sliderMin = 1;
sliderMax = size(result); % this is variable
sliderStep = [1, 1]; % major and minor steps of 1

set(handles.slider, 'Min', sliderMin);
set(handles.slider, 'Max', sliderMax);
set(handles.slider, 'SliderStep', sliderStep);
set(handles.slider, 'Value', sliderMin); % set to beginning of sequence

在滑块回调中,我已经验证了Min,Max和SliderStep的设置是否正确.

sliderMin = get(hObject, 'Min') % correct
sliderMax = get(hObject, 'Max') % correct
sliderStep = get(hObject, 'SliderStep') % correct
currentSliderStep = get(hObject, 'Value') % correct, 1 at start

但是,当我单击滑块的箭头时,我只在开始和结束之间跳转.每次将正确的Min,Max,SliderStep和Value(尽管只有1或sliderMax)打印到命令窗口时.我无法以1的增量步进以查看序列内部的图像.

我之前在Stackoverflow上看过这个问题,但是找不到准确的答案.我只想让字幕叠加在我的图像上.相反,他们似乎只是落在了下面.我假设这可能是一个定位问题,但找不到任何其他资源来查明问题.我想我会问这里.感谢您提前的时间.下面是CSS,HTML和JavaScript以及jQuery.我已按照Flexslider所述的说明进行安装.

CSS

    .flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: …

我创建了一个滑块如下,

<input id="brightness" onChange="changeBrightness()" data-slider-id='ex1Slider' type="text"
                    data-slider-min="-100" data-slider-max="100" data-slider-step="2" data-slider-value="0"/>

我需要动态设置值到这个滑块.我试过了,

$("#brightness").slider('setValue', 8, true);
$("#brightness").slider('refresh');

但这不起作用.我该怎么做？