nstSlider基本使用

nstSlider是一款简单的滑动条自定义插件，此插件可用于实现一段数据的选择。

需要包含的文件

<link rel="stylesheet" href="../bootstrap/js/nstSlider/jquery.nstSlider.css">

<script src="../bootstrap/js/nstSlider/jquery.nstSlider.js"></script>
    <script src="../bootstrap/js/nstSlider/jquery.nstSlider.min.js"></script>

html代码

 <table class="table table-bordered">
                                    <tr>
                                        <td align="center" colspan="5" style="font-size:22px;padding-bottom:2px!important">时间段选择</tr>
                                    <tr>
                                      <td >
                                      	<div class="leftLabel" style="position:relative;width:10%;float:left;margin-left:5px;margin-top:25px;"></div>
                                      	<div class="nstSlider" data-range_min="0" data-range_max="24" data-cur_min="8" data-cur_max="16" style="position:relative;margin-left:25px;">
											<div class="bar"></div>
    										<div class="leftGrip"></div>
    										<div class="rightGrip"></div>
										</div>						
										<div class="rightLabel" style="position:relative;width:10%;float:right;margin-top:5px;margin-right:5px;text-align:right;"></div>
                                      </td>
                                    </tr>
                                  
                                    <tr>
                                        <td colspan="5">
                                            <div class="box-body" style="text-align:center">
                                                <button class="btn bg-olive" οnclick="SaveData()">确  定</button>
                                                <button class="btn bg-orange" style="margin-left:200px" οnclick="closeMe()">关  闭</button>
                                            </div>
                                        </td>
                                    </tr>
                                </table>

js代码

//基本设置
    	$('.nstSlider').nstSlider({
    	    "left_grip_selector": ".leftGrip",
    	    "right_grip_selector": ".rightGrip",
    	    "value_bar_selector": ".bar",
    	    "value_changed_callback": function(cause, leftValue, rightValue) {
    	        $(this).parent().find('.leftLabel').text(leftValue+'点');
    	        $(this).parent().find('.rightLabel').text(rightValue+'点');
    	    }
    	});

效果

获得左右两个节点选中的值

var leftLabel = $('.nstSlider').parent().find('.leftLabel').text();
var rightLabel = $('.nstSlider').parent().find('.rightLabel').text();