0

É possivel, setar os valores que ficarão entre o valor mínimo e o valor máximo, por exemplo, eu seto o valor mínimo para 10 e o máximo para 200, mas eu não quero que os valores entre eles sejam os número entre 10 e 200 e sim, 15,25,50,80,199. Quero eu mesmo especificar os valores.

$('.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>

2
  • 1
    amigo pelo que vejo com o nstSlider não é possivel fazer isso, seria necessario arranjar outro, recomendo o noUiSlider veja o exemplo de Using the slider with huge numbers, eh so trocar os numeros pelos quais você quiser
    – jbrunoxd
    27/11/2015 às 18:09
  • muito obrigado. 27/11/2015 às 18:56

1 Resposta 1

0

Você até consegue algo semelhante à definição de passos com o nstSlider, através do atributo rounding em seu construtor. Mas não é um meio muito confiável.

$('.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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .