序列化滑塊值到不可編輯的文本對象

我試圖建立一個範圍滑塊連載它的值轉換成非可編輯的文本元素，如在這裏看到http://www.padmapper.com/序列化滑塊值到不可編輯的文本對象

我使用noUiSlider jQuery插件http://refreshless.com/nouislider/range-slider-form滑塊和我已經設法建立一個滑塊，將代碼序列化到輸入字段。我的問題是如何將輸入字段中的值轉換爲不可編輯的文本對象，如padmapper示例中那樣？

以下兩個方案僅僅在其開始值，而不是動態調整滑塊的運動凍結滑塊值 -

jQuery: how to serialize data inside of form that are not inputs?

Convert input field to text with jquery?

下面的代碼 - 對不起沒有JFiddle - 找不到的URI noUiSlider JS和CSS：

<html> 

<form id="form"> 

<div id="slider"></div> 

    <table> 
     <tr> 
     <td> <input class="simpleCart_input" type="text" name="min-euro" id="min-euro"></td> 
     <td> <input class="simpleCart_input" id="max-euro" type="text"></td> 
     </tr> 
    </table> 
</form> 


<js> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/jquery.nouislider.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    var slider = $('#slider'), 
     form = $('#form'); 

    slider.noUiSlider({ 
     range: [0,8000] 
     ,start: [1000,7000] 
     ,connect: true 
     ,serialization: { 
     resolution: 0.1, 
     to: [ 
      [ $('#min-euro')], 
      [ $('#max-euro')] 
     ] 
     } 
    }); 
    </script> 

<css> 

#slider { 
    width: 300px; 
    margin: 30px auto; 
} 

form { 
    border: 1px solid #ccc; 
    width: 500px; 
    margin: 0 auto 30px; 
} 

table { 
    font-family: Arial; 
    table-layout: fixed; 
    width: 500px; 
    margin: 0 auto; 
    text-align: center; 
} 
td { 
    width: 50%; 
    padding: 10px; 
} 

input, select { 
    padding: 5px; 
} 

<!-- noUiSlider css code too long to insert -->

來源

2014-01-16 user2373062

順便說一句：爲什麼不只是禁用輸入'disabled =「disabled」'？ – Simon

解決我噸。在滑塊的序列化選項下，您必須在id後面添加'html'限定符。然後改變輸入的跨度：

<html> 


<form id="form"> 

<div id="slider"></div> 

    <table> 
     <tr> 
     <td> <span id="min-euro"></span></td> 
     <td> <span id="max-euro"></span> <td> 
     </tr> 
    </table> 
</form> 


<script type="text/javascript"> 

    var slider = $('#slider'), 
     form = $('#form'); 

    slider.noUiSlider({ 
     range: [0,8000] 
     ,start: [1000,7000] 
     ,step: 10 
     ,connect: true 
     ,serialization: { 
     to: [ 
      [ $('#min-euro'), 'html'], 
      [ $('#max-euro'), 'html'] 
     ] 
     } 
    }); 
    </script>

來源

2014-01-16 16:31:53 user2373062

序列化滑塊值到不可編輯的文本對象

回答

相關問題