bootstrap-slider link Eingangsnummer mit Diawechsel

Question

Ich benutze bootstrap-slider.js. Mein Problem ist, dass ich die Eingangsnummer nicht mit einer Folie verknüpfen kann. Ich möchte auch schieben, um zu ändern, wenn die Eingangsnummer geändert wird.

Slider

<div id="slider-year" class="search-block"> 
    <h2 class="title">Production year</h2> 
    <div class="slider-year-amount"> 
    <span class="pull-left">1900</span> 
    <span class="pull-right">2017</span> 
    </div> 
    <input type="text" class="year-slider" style="width:100%" data-slider-min="1900" data-slider-max="2017" data-slider-step="1" data-slider-value="[1900,2017]" /> 
    <div class="row"> 
    <div class="year-box"> 
     <div class="col-lg-6"> 
     <label>From</label> 
     <input type="number" min="1900" max="2019" class="form-control" placeholder="1900" id="minYear" value="1900" name="year_since"> 
     </div> 
     <div class="col-lg-6"> 
     <label>To</label> 
     <input type="number" min="1901" max="2020" class="form-control" placeholder="2017" id="maxYear" value="2017" name="year_to"> 
     </div> 
    </div> 
    </div> 
</div> 

Wie ich versuche zu aktualisieren Schieber:

jQuery("#minYear").change(function() { 
    jQuery("#slider-year").slider('setValue', jQuery(this).val()); 
}); 

hier auch Dokumentation zu diesem Schieber ist, wenn jemand neugierig ist, ich Lösung nicht finden konnte: http://www.eyecon.ro/bootstrap-slider

JsFiddle: https://jsfiddle.net/y95vfds3/6/

Answer 1

Möchten Sie so?

$("#minYear").change(function() { 
     $("#slider-year").slider('setValue', jQuery(this).val()); 
    }); 

    val = $('.year-slider').slider(); 

    $('.year-slider').on('slide', function(ev) { 
     $('#minYear').val(ev.value[0]); 
     $('#maxYear').val(ev.value[1]); 
    }); 

https://jsfiddle.net/gnanavelr/y95vfds3/7/

https://jsfiddle.net/gnanavelr/y95vfds3/8/