| 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.
---
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
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.
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: 50Examples
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: 50Markup
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: 50Markup
<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. |