在 drupal 8 中创建一个 js 范围滑块

Question

我在一个 Drupal 网站上工作。 基本设置是用户可以制作页面/模块，其中可以编写 html 以通过 Drupal 中的一些设置，通过一些预定义的 css 来呈现。 例如，如果我想制作一个带有“someclass”类的表格，我会输入

<table class="someclass>
  ...
</table>

并保存模块。 我想制作一个滑块，用户可以使用它来选择一些值（通常在 1 到 100 之间），为此我想使用js-rangeslider 。 我通过将 rangelider.js 中的代码和 css 添加到项目主题中来实现这一点，并告诉 drupal 在 yaml 文件中使用它，如下所示

global-styling:
  version: 1.x
  css:
    theme:
      css/rangeslider.css: {}
  js:
    js/rangeslider.js: {}
  dependencies:
    - core/jquery

现在我想做一个测距仪。 为此，我尝试了以下方法：

<input type="range" class="rangeslider">

这似乎没有任何作用，所以我查看了js-rangeslider 页面。 这里他们建议使用 jquery 来制作元素，这在使用 drupal 时很有意义。 所以我做了一个脚本

(function ($) {
  Drupal.behaviors.myproject = {
    attach: function (context, setting) {
      $('input[type="range"]').rangeslider();   
    }
  };
})(jQuery);

但这不会改变任何事情。 我仍然只是得到一个标准的范围输入元素。 顺便说一下，jquery 确实捕获了输入元素，因为我已经尝试过 console.logging。

我希望我只是在这里很愚蠢，但无论如何我都找不到解决方案。 提前致谢，理查德。

Answer 1

请允许我向您介绍我的模块，该模块提供与 Drupal 的表单 API 和 Webform 的集成： https : //www.drupal.org/project/range_slider

它有一个与 Drupal 8 和即将推出的 9 兼容的稳定版本。

希望这可以帮助。 对于任何问题，我很乐意在项目的问题队列中提供帮助： https : //www.drupal.org/project/issues/range_slider?status=All&categories=All