Ion.rangeSlider添加/减少和选项卡问题

Question

我已经在Bootstrap Tabs内部实现了Ion.rangeSlider，滑块看起来只是在选项卡内部，实际上它被放置在选项卡内容面板外部。

• 因此，有3个选项卡Starter、Value和Pro
• 单击每个选项卡时，范围滑块的值分别更改为85000、525000和1000000
• 有一个+/-按钮，单击时会将滑块值增加/减少1000。当单击范围滑块按钮并将其拖动到任何点时，此+/-按钮都能正常工作

问题是，当单击任何选项卡按钮时，这个+/-都无法正常工作。复制问题：-

1） 点击Value或Pro按钮

2） 然后点击+/-按钮，该按钮应该会从该点增加/减少值，但不会。

请提供解决方案。谢谢。

var $keywordSlider = $('#slider-bar'),
    $btnMinus = $('#button-minus'),
    $btnPlus = $('#button-plus'),
    min = 0,
    max = 1200000,
    from = 85000,
    step = 1000;
    
 
$keywordSlider.ionRangeSlider({
    type: "single",
    keyboard: true,
    prettify_separator: ",",
    min: min,
    max: max,
    step: step,
    from: from,
    onFinish: function (data) {
        from = data.from;
    }
});
    
$btnMinus.on("click", function () {
    updateRange(-1);
});
    
$btnPlus.on("click", function () {
    updateRange(1);
});
    
var range_instance = $keywordSlider.data("ionRangeSlider");
    
var updateRange = function (direction) {
    from += step * direction;
    if (from < min) {
        from = min;
    } else if (from > max) {
        from = max;
    }
    
    range_instance.update({
        from: from
    });
};
    
$('ul.nav-tabs li#starter-plan a').click(function(data) {
    range_instance.update({
        from: 85000
    });
});
$('ul.nav-tabs li#value-plan a').click(function(data) {
     range_instance.update({
        from: 525000
    });
});
$('ul.nav-tabs li#pro-plan a').click(function(data) {
     range_instance.update({
        from: 1000000
    });
});

<div id="membership-plan">
            <ul class="nav nav-tabs">
                <li id="starter-plan" role="presentation" class="active"><a href="#tab-starter" data-toggle="tab">Starter</a></li>
                <li id="value-plan" role="presentation"><a href="#tab-value" data-toggle="tab">Value</a></li>
                <li id="pro-plan" role="presentation"><a href="#tab-pro" data-toggle="tab">Pro</a></li>
            </ul>
            
            <div id="keyword-slider">
                <h2 class="txt-center">Custom</h2>
                <h3>Keywords total:</h3>
                <input type="text" id="slider-bar" name="example_name" value="" style="width: 64%;" />
                
                <br /><br /><br /><br /><br />
                <button id="button-minus">&minus;</button> &nbsp; &nbsp; <button id="button-plus">&plus;</button>
            </div> <!-- END KEYWORD SLIDER -->
            
            <div class="tab-content">
                <div id="tab-starter" class="tab-pane fade in active">
                    <div class="plan-details">
                        <header>
                            <strong class="price">$23</strong>
                            <span class="period">PER MONTH</span>
                        </header>
                        <span class="para base-xs-buffer">
                            <b>Data</b><br />
                            Avg. Monthly Volume<br />
                            Historical Volume<br />
                            Competition Score<br />
                            Recommended Bid ($USD)
                        </span>
                        <span class="para">
                            <b>Support</b><br />
                            Email only
                        </span>
                        
                        <footer>                
                            <button class="btn btn-normal">Sign-up</button>
                            <button class="btn btn-normal">Contact</button>                      
                        </footer>
                    </div> <!-- END PLAN DETAILS -->
                </div> <!-- END TAB STARTER -->
                <div id="tab-value" class="tab-pane fade">
                    <div class="plan-details">
                        <header>
                            <strong class="price">$115</strong>
                            <span class="period">PER MONTH</span>
                        </header>
                        <span class="para base-xs-buffer">
                            <b>Data</b><br />
                            Avg. Monthly Volume<br />
                            Historical Volume<br />
                            Competition Score<br />
                            Recommended Bid ($USD)
                        </span>
                        <span class="para">
                            <b>Support</b><br />
                            Email only
                        </span>
                        <footer>                
                            <button class="btn btn-normal">Sign-up</button>
                            <button class="btn btn-normal">Contact</button>                      
                        </footer>
                    </div> <!-- END PLAN DETAILS -->
                </div> <!-- END TAB VALUE -->
                <div id="tab-pro" class="tab-pane fade">
                    <div class="plan-details">
                        <header>
                            <strong class="price">$185</strong>
                            <span class="period">PER MONTH</span>
                        </header>
                        <span class="para base-xs-buffer">
                            <b>Data</b><br />
                            Avg. Monthly Volume<br />
                            Historical Volume<br />
                            Competition Score<br />
                            Recommended Bid ($USD)
                        </span>
                        <span class="para">
                            <b>Support</b><br />
                            Email only
                        </span>
                        <footer>                
                            <button class="btn btn-normal">Sign-up</button>
                            <button class="btn btn-normal">Contact</button>                      
                        </footer>
                    </div> <!-- END PLAN DETAILS -->
                </div> <!-- END TAB PRO -->
            </div> <!-- END TAB CONTENT -->
        
        </div> <!-- END MEMBERSHIP PLAN -->

Answer 1

只需将from=VALUE添加到选项卡单击代码中即可解决问题。

$('ul.nav-tabs li#starter-plan a').click(function(data) {
range_instance.update({
    from: 85000
});