在 drupal 8 中创建一个 js rangeslider答案

【问题标题】：Creating a js rangeslider in drupal 8在 drupal 8 中创建一个 js rangeslider
【发布时间】：2020-03-30 13:04:59
【问题描述】：

我正在开发一个 Drupal 网站。基本设置是用户可以制作页面/模块，其中可以编写要由 Drupal 中的某些设置或某些预定义的 css 呈现的 html。例如，如果我想创建一个带有“someclass”类的表，我会输入

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

并保存模块。我想制作一个滑块，用户可以使用它来选择一些值（通常在 1 到 100 之间），为此我想使用js-rangeslider。我通过将rangeslider.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 page。这里他们建议使用 jquery 来制作元素，这在使用 drupal 时很有意义。所以我做了一个脚本

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

但这并没有改变任何东西。我仍然只是得到一个标准范围输入元素。顺便说一句，jquery 确实捕获了输入元素，因为我已经尝试过 console.logging。

我希望我在这里只是愚蠢，但无论如何我都无法找到解决方案。在此先感谢理查德。

【问题讨论】：

标签： javascript php jquery drupal rangeslider

【解决方案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

【讨论】：