range slider jquery

Asked

Viewed 128 times

0

It is possible, set the values that will be between the minimum value and the maximum value, for example, I give 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
  • 1

    friend from what I see with nstSlider is not possible to do that, it would be necessary to find another, recommend the noUiSlider see the example of Using the slider with Huge Numbers, it is only change the numbers by which you want

  • thank you very much.

1 answer

0

You can even achieve something similar to defining steps with nstSlider, through the attribute rounding in its builder. But it is 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>

<script src="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>


<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="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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.