range slider jquery

Question

range slider jquery

Navigation

#1 by (0 votes)

0

It is possible to set the values that will be between the minimum value and the maximum value, for example, I set the minimum value to 10 and the maximum value to 200, but I do not want the values between them to be the number between 10 and 200 and yes, 15,25,50,80,199. I want to specify the values myself.

$('.nstSlider').nstSlider({        
    "left_grip_selector": ".leftGrip",
    "right_grip_selector": ".rightGrip",
    "value_bar_selector": ".bar",
    "value_changed_callback": function (cause, leftValue, rightValue) {
        $('#leftLabel').text(leftValue);
        $('#rightLabel').text(rightValue);
    }
});

<div class='row'>
<div class='col-xs-2'>
    <div id="leftLabel"></div>
</div>
<div class='col-xs-8'>
    <div class="nstSlider" data-range_min="0" data-range_max="100" data-cur_min="0" data-cur_max="100">

        <div class="bar"></div>
        <div class="leftGrip"></div>
        <div class="rightGrip"></div>
    </div>
</div>
<div class='col-xs-2'>
    <div id="rightLabel"></div>
</div>

jquery

asked by anonymous 26.11.2015 / 14:54

1 answer

Django error: Invalid block tag: expected 'endblock' Character Incompatibility in Sass ('IBM437' and 'UTF-8')

score 0 · Answer 1

You even get something similar to setting steps with nstSlider , through the rounding attribute in your constructor. But it's not a very reliable medium.

$('.nstSlider').nstSlider({
    "rounding": {        
        "15": "15",
        "25": "25",        
        "50": "50",
        "80": "80",        
        "199" : "199",        
        "200" : "200",
        
    },
    "left_grip_selector": ".leftGrip",
    "right_grip_selector": ".rightGrip",
    "value_bar_selector": ".bar",
    "value_changed_callback": function (cause, leftValue, rightValue) {
        $('#leftLabel').text(leftValue);
        $('#rightLabel').text(rightValue);
    }
});

///15,25,50,80,199

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/jquery-nstslider/1.0.13/jquery.nstSlider.min.css';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nstslider/1.0.13/jquery.nstSlider.min.js"></script><divclass='row'><divclass='col-xs-2'><divid="leftLabel"></div>
</div>
<div class='col-xs-8'>
    <div class="nstSlider" data-range_min="0" data-range_max="200" data-cur_min="0" data-cur_max="200">

        <div class="bar"></div>
        <div class="leftGrip"></div>
        <div class="rightGrip"></div>
    </div>
</div>
<div class='col-xs-2'>
    <div id="rightLabel"></div>
</div>