How to update value of jquery slider pagination(codrops) by input type

Question

I'm using the jQuery slider pagination by Codrops: http://tympanus.net/Development/SliderPagination/

I want the value of slider to update by changing the value of input text, as well as vice versa.

But, when I type some value at the input text, the value is not updated, instead it appear on a new pagination slider.

This the code:

$(function () {
    $("#aduhh").change(function(){
        // alert($("#aduhh").val())
        $( "#slider" ).pagination( {
            Value : $("#aduhh").val(),
        });
    });  
    $( "#slider" ).pagination( {
        Value : 10,
        total : 100,
        step:1,  
        next:1,
        onChange : function( value ) { 
        $("#aduhh").val(value);
        }
    });
});   

html:

<div id="slider" class="sp-slider-wrapper">
   <nav>
      <a href="#" class="sp-prev">Previous</a>
      <a href="#" class="sp-next">Next</a>
   </nav>
</div> 

  <input type="text" id="aduhh" /> 

and this is the http://jsfiddle.net/teman_bermain/c2peX/2

How can I do this? Thanks.

sorry for my grammar.

Answer 1

Your code will add new pagination slider each time you change the value of $("aduhhh"), since you call .pagination on a callback.

$(function() {
    var initValue = 10;

    $("#aduhh").val(initValue);

    var mySlider = $("#slider").pagination({
        value : initValue,
        total : 100,
        step : 1,
        next : 1,
        onChange : function(value) {
          $("#aduhh").val(value);
        }
    });

    $("#aduhh").change(function() {
      var currentValue = $("#aduhh").val();

      mySlider.slider.value = currentValue;
      $("#slider span").text(currentValue);
    })
})