Jekyll One

QuickSearch

This page is under construction. An updated version will be available soon.

The Javascript tool nouiSlider is a 3rd party plugin fully integrated into the J1 Theme by the module rangeslider. Read the following sections on using the module for your web pages.

For all possible slider configurations, see noUiSlider's official documentation to see a variety of more slider options available.

Asciidoc Markup

J1 Theme provides an Asciidoc Extension range_slider:: to integrate configured range sliders by Asciidoc Markup into your web pages. The extension is easy to use as only two parameters are required:

  • slider ID

  • additional CSS classes (if required)

range_slider::slider_id[]
range_slider::slider_id[role="additional CSS classes"]

HTML Markup

Alternatively, a range slider can also be noted using HTML markups. Even in the case of notation via HTML, all configured parameters are applied when the module is initialized.

Remember that for HTML code placed in an (Asciidoc) page, the code has to be enclosed in a pass-through block, delimited by four plus signs ().
<div id="slider" class="range-slider"></div>

Page configuration

The module rangeslider is resource record of type ondemand and only available with a page if the module is explicitly requested.

J1 Page Configuration (Front matter)
---
title:                                  <your title>
tagline:                                <your tagline>
...
resources:                              [ rangeslider ] (1)
resource_options:
  <your options>
---
1 The module rangeslider needs to be given with the record resources as the resource in only available on demand.

Resource configuration

Resource record for the module rangeSlider (resources.yml)
# ----------------------------------------------------------------------------
# Range Slider, based on the JS implementation of the noUiSlider API
# See: https://github.com/leongersen/noUiSlider
#
- name:                               rangeSlider
  resource:
    enabled:                          true
    id:                               rangeslider
    comment:                          module rangeSlider
    region:                           head
    layout:                           [ page, post, collection, raw ]
    required:                         ondemand
    preload:                          false
    script_load:                      defer
    dependencies:                     false
    pass_init_data:                   false
    data:
      css:                            [ modules/rangeSlider/css/theme/uno/nouislider ]
      files:                          [ adapter/js/rangeSlider.js ]
      js:                             [ modules/rangeSlider/js/nouislider ]
      init_function:                  [ j1.adapter.rangeSlider.init ]

Module configuration

Before range sliders are used with your websites, all sliders must be set up via the module’s user configuration. The range sliders used can be configured below the sliders key in the rangeSlider.yml configuration file located in the folder ~/_data/modules.

J1 Module Configuration (rangeSlider.yml, excerpt)
# ------------------------------------------------------------------------------
# ~/_data/modules/rangeSlider.yml
# User Configuration of the Range Slider Module
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
...
  sliders:
    # --------------------------------------------------------------------------
    # example slider
    #
    - slider:
        enabled:                        true
        id:                             example_slider_asciidoc
        options:
          title:                        "Title of the Example Slider"
          label:                        "Example Slider, range: [5,50], start at: 25, step: 5"
          start:                        25
          step:                         5
          range:
            min:                        5
            max:                        50
    # --------------------------------------------------------------------------
    # example slider (controled)
    #
    - slider:
        enabled:                        true
        id:                             example_slider_html
        options:
          title:                        "Title of the Example Slider (controlled)"
          label:                        "Example Slider, range: [5,50], start at: 25, step: 5"
          start:                        25
          step:                         5
          range:
            min:                        5
            max:                        50

Examples

The following examples show identical sliders but in different configurations. Once noted using the built-in Asciidoc extension, the other uses native HTML markup. The example using HTML Markup is a bit more complex as Javascript is used to control the slider (reset button).

Do not use the identical slider ids on the same page. Duplicate ids on the same page will cause the module initialization to fail and result in no sliders being usable.

Asciidoc Markup

The slider’s notation using Asciidoc may be completely sufficient for simple user interfaces. Remember that evaluating the slider’s values requires always a Javascript interface to react to the values changed by the slider.

Module configuration

# ------------------------------------------------------------------------------
# Example Slider
#
- slider:
    enabled:                        true
    id:                             example_slider_asciidoc
    options:
      title:                        "Title of the Example Slider"
      label:                        "Example Slider, range: [5,50], start at: 25, step: 5"
      start:                        25
      step:                         5
      range:
        min:                        5
        max:                        50

Markup

range_slider::example_slider_asciidoc[role="mt-5 mb-5"]

Rendered Slider

See the rendered slider below (ID: example_slider_asciidoc) based on the Asciidoc Markup using the extension range_slider:::

HTML Markup

The slider’s notation using Asciidoc is sufficient for simple user interfaces. For more complex user interfaces it is recommended to use HTML markups. The following example implements a slider and a control button to reset the slider to the defaults value.

Module configuration

# --------------------------------------------------------------------------
# example slider (controlled)
#
- slider:
    enabled:                        true
    id:                             example_slider_html
    options:
      title:                        "Title of the Example Slider (controlled)"
      label:                        "Example Slider, range: [5,50], start at: 25, step: 5"
      start:                        25
      step:                         5
      range:
        min:                        5
        max:                        50
        max:                        50

Markup

<div id="example_slider_html" class="range-slider mt-5 mb-5"></div>
<button type="button" name="reset-example-defaults"
  class="btn btn-flex btn-primary mt-3"
  aria-label="Reset Button"
  style="min-width: 12rem">
  <i class="mdi mdi-close mdi-24px mr-1"></i>
  Reset Slider
</button>
<script>
  $(function() {
    var dependencies_met_controlled_slider_finished = setInterval(function() {
      if (j1.adapter.rangeSlider.getState() == 'finished') {
        var controlledSlider = document.getElementById('example_slider_control');
        clearInterval(dependencies_met_controlled_slider_finished);
        controlledSlider.noUiSlider.on('update', function (values, handle) {
          console.log('Current value of the example slider: ' + values[handle]);
        });
        $('button[name="reset-example-defaults"]').on('click', function (e) {
          var default_value = 25;
          console.log('Reset the example slider value to: ' + default_value);
          controlledSlider.noUiSlider.set(default_value);
        });
      } // END if rangeSlider.getState()
    }, 25); // End interval dependencies_met_controlled_slider_finished
  }); // END document ready
</script>

Rendered Slider

Find the rendered slider below (ID: example_slider_html) based on the HTML Markups from above. Additional, a Javascript is used to control (reset) the slider. Click the button RESET SLIDER to reset the slider to the default value.

You can monitor the changes on the slider using the development console of your browser.