jQuery UI滑块在视图中不可见

Question

我想在Rails应用程序中放置一个滑块，但是没有显示该滑块。 我在gemfile中：gem 'jquery-rails'和gem 'jquery-ui-rails'。

这是.js文件：

import $ from "jquery";
import "jquery-ui";
import "jquery-ujs";

$(function () {
    $('.slider__container').slider({
        range: "max",
        min: 0,
        max: 100,
        value: 20,
        slide: function (event, ui) {
            $('#value').val( ui.value );
            filterSystem(ui.value);
        }
    })
});

function filterSystem(value) {
    $("em.match.js-match").hide().filter(function () {
        var length = parseInt($(this).attr("data-length"));
        return  value <= length;
    }).show();
}

，这里有用于该视图的.haml文件：

.slider.js-slider-filter
  %header.container__header


    .container__title
      %label{:for => "value"} Value:
      %input{:id => "value", :style => "border: 0; color: #f6931f; font-weight: bold;", :type => "text"}

    .container__extra
  .slider__container

here is the slider in jsfiddle visible

但是不幸的是，我只看到一个空容器，而视图中没有看到滑块。如果能获得一些有关使滑块可见的帮助，我将不胜感激！？