如何将范围滑块添加到轨道应用程序

How to add range slider to rails app?

本文关键字：添加 轨道 应用程序 范围      更新时间：2023-09-26

我想使用"bootstrap-slider"向我的应用程序添加范围滑块过滤器，但我不知道如何将 html 属性添加到text_field_tag。我需要以下属性text_field_tag

data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"

形式

    <%= form_tag @sub_category, method: 'get' do |d| %>
    <%= text_field_tag "ex2", type: 'text',
                 data: {'slider-id' => 'ex1Slider',
                        'slider-min' => '10',
                        'slider-max' => '1000',
                        'slider-step' => '5',
                        'slider-value' => '[250,450]' }
 %>
    <% end %>

脚本

<script type="text/javascript">
$( document ).ready(function() {
$("#ex2").slider({});
});
</script>

生成的网页

<input id="ex2" name="ex2" type="text" value="{:type=>"text", :data=>{"slider-id"=>"ex1Slider", "slider-min"=>"10", "slider-max"=>"1000", "slider-step"=>"5", "slider-value"=>"[250,450]"}}" style="display: none;">

在此之后脚本不起作用

text_field_tag的第二个参数是值：http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-text_field_tag

您需要在标签"ex2"的名称后添加 nil，并且不需要键入："text"，因为这是默认值，但如果需要，您可以保留它。

<%= text_field_tag "ex2", nil, type: 'text',
                 data: {'slider-id' => 'ex1Slider',
                        'slider-min' => '10',
                        'slider-max' => '1000',
                        'slider-step' => '5',
                        'slider-value' => '[250,450]' }
 %>

text_field_tag的第二个参数是值。查看文档

这是代码的方式

<%= text_field_tag "ex2", nil, :data => {'slider-id' => 'ex1Slider','slider-min' => '10','slider-max' => '1000','slider-step' => '5','slider-value' => '[250,450]'  }%>
相关文章：