jquery - Show slider value for each slider in cshtml -


i want show list of items, each it's own slider in razor file.

so limited knowledge managed show sliders items, how can show slider value in input text box? i.e. slider moves value should displayed.

foreach (var item in items) {    @item.description    <input type="text" id="value@(item.uniqueid)">    <div class="slider" id="slider@(item.uniqueid)"></div> }  <script>     $(function () {         $(".slider").slider();         ????     }); </script> 

first, check api documentation: http://api.jqueryui.com/slider/

this shows number of events can use - "as slider moves" implies slide event.

next, need link slider , input - using .prev, html fixed, or dynamically subtract 'slider' , add 'value', again, risks breaking in future - easiest option add related input slider div (there various ways this, below quite straightforward):

<div class='slider'       id='slider@(item.uniqueid)'       data-inp='value(@item.uniqueid)'> </div> 

then add handler slide event:

$(function() {     $(".slider").slider();     $(".slider").on("slide", function(e, ui) {         $("#" + $(this).data("inp")).val(ui.value);     }); }); 

here's fiddle show working single input/slider: http://jsfiddle.net/76d4t8p3/


Comments