javascript - YUI API 双 slider 控制问题

Question

我正在使用 YUI 2.7 库来处理网页中的双 slider (范围 slider )控件。

它效果很好 - 但是，我希望允许用户通过 Ajax 切换范围值 - 有效地将价格范围从“0-50,000”更改为子集(例如“50-250”)，而无需重新加载页。

问题在于，即使我在函数内明确将它们设置回 NULL 以“重建” slider ，现有 slider 中的值似乎也不会重置。

在 ajax 请求之后， slider handle 出现错位(远离右侧的刻度)，并且 slider 的值明显随机波动。

除了将其引用设置为 null 之外，还有其他方法可以显式销毁 YUI slider 对象吗？或者我只需要以某种方式重新声明比例和最小/最大值？

感谢您的帮助(我会尽快发布示例链接)

代码如下:

function slider(bg,minthumb,maxthumb,minvalue,maxvalue,startmin,startmax,aSliderName,soptions) {
        var scaleFactor = null;
        var tickSize = null;
        var range = null;
        var dual_slider = null;
        var initVals = null;
        var Dom = null;

        range = options.sliderLength;
        if ((startmax - startmin) < soptions.sliderLength) {
            tickSize = (soptions.sliderLength / (startmax - startmin));
        }else{
            tickSize = 1;
        }

        initVals = [ 0,soptions.sliderLength ], // Values assigned during instantiation
        //Event = YAHOO.util.Event,
        dual_slider,
        scaleFactor = ((startmax - startmin) / soptions.sliderLength); 

        dual_slider = YAHOO.widget.Slider.getHorizDualSlider(
        bg,minthumb,maxthumb,range, tickSize, initVals);

        dual_slider.subscribe("change", function(instance) {
            priceMin = (dual_slider.minVal * scaleFactor) + startmin;
            priceMax = (dual_slider.maxVal * scaleFactor) + startmin;
        });

        dual_slider.subscribe("slideEnd", function(){ alert(priceMin + ' ' + priceMax); });
        return dual_slider;
    }

Answer 1

将startmin、startmax和scaleFactor存储在dual_slider对象上，然后在ajax回调中使用新值更新这些属性。更改您的更改事件订阅者以引用 this.startmin、this.startmax 和 this.scaleFactor。

Slider 和 DualSlider 仅真正了解拇指的像素偏移，并按此报告值。正如您所做的那样(以及大多数 slider 示例)，您需要应用转换因子将像素偏移转换为“值”。这种常见的习惯用法已被纳入 YUI 3 Slider 的核心逻辑中(尽管库中还没有 DualSlider)。

下面是一个说明动态更新值范围的示例: http://yuiblog.com/sandbox/yui/v282/examples/slider/slider_factor_change.html