在 cshtml 中显示每个滑块的滑块值

Question

我想显示项目列表，每个项目在 Razor 文件中都有自己的滑块。

因此，由于知识有限，我设法显示了所有项目的滑块，但如何在输入文本框中显示滑块值？ IE。当滑块移动时，应显示该值。

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>

Answer 1

首先，查看 API 文档：http://api.jqueryui.com/slider/

这显示了您可以使用的一些事件 - "as the slider moves" 表示 slide 事件。

接下来，您需要 link 滑块和输入 - 您可以使用 .prev 执行此操作，但随后您的 html 将被修复，或者您可以动态减去 'slider' 并添加 'value'，但同样，将来有崩溃的风险 - 所以最简单的选择是将相关输入添加到滑块 div（有多种方法可以做到这一点，下面是非常简单）：

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

然后为幻灯片事件添加处理程序：

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

这里有一个 fiddle 来展示它对单个 input/slider 的工作：http://jsfiddle.net/76d4t8p3/

在 cshtml 中显示每个滑块的滑块值

Show slider value for each slider in cshtml

asp.net-mvc

jquery

jquery-ui

razor

jquery-ui-slider