Question

我正在尝试构建一个范围滑块，将其值序列化为不可编辑的文本元素，如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 - 找不到noUiSlider JS和CSS的URI：

<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 -->

Answer 1

解决了它。在滑块的序列化选项下，您必须在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>

将滑块值序列化为不可编辑的文本对象

1 个答案: