LJ Range Slider plugin for Craft CMS 3 and Craft CMS 4.

An easy-to-use, flexible and responsive range slider for Craft CMS.

Requirements

This plugin requires Craft CMS 3 or later.

Installation

You can install the plugin via the Craft Plugin Store.

LJ Range Slider Overview

This plugin adds the following fieldtype:

  • LJ Range Slider

Screenshot

Simple start, basic params

Set min value, max value and start point.

Screenshot

min: 100,
max: 1000,
from: 550

Set type to double, specify range, show grid and add a prefix "$".

Screenshot

type: "double",
grid: true,
min: 0,
max: 1000,
from: 200,
to: 800,
prefix: "$"

Set up range and step

Set up range with negative values.

Screenshot

type: "double",
grid: true,
min: -1000,
max: 1000,
from: -500,
to: 500

Force fractional values, using fractional step 0.1.

Screenshot

type: "double",
grid: true,
min: -12.8,
max: 12.8,
from: -3.2,
to: 3.2,
step: 0.1

UI controls

Hide min and max labels

Screenshot

min: 100,
max: 1000,
from: 550,
hide_min_max: true

Hide from and to labels

Screenshot

min: 100,
max: 1000,
from: 550,
hide_min_max: true,
hide_from_to: true

Using array of custom values

When using custom values, FROM and TO should be zero-based index of values array. So in the example below 0=0, 1=10, 2=100, 3=1000, 4=10000 etc.

Screenshot

type: "double",
grid: true,
from: 2,
to: 5,
values: [0, 10, 100, 1000, 10000, 100000, 1000000]

Values array could be anything, even strings.

Screenshot

grid: true,
from: new Date().getMonth(),
values: [
    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
]

Same as above, but using Twig logic.

grid: true,
from: {{ now|date('n') - 1 }},
values: [
    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
]

Change visual look of numbers (prettify).

Improve readability of big numbers, like 1000000.

Screenshot

grid: true,
min: 1000,
max: 1000000,
from: 100000,
step: 1000,
prettify_enabled: true,
prettify_separator: ","

Decorating numbers with prefixes, postfixes and other symbols.

Adding currency symbol and + symbol to the maximum number.

Screenshot

grid: true,
min: 0,
max: 100,
from: 50,
step: 5,
max_postfix: "+",
prefix: "$"

Screenshot

grid: true,
min: 0,
max: 100,
from: 50,
step: 5,
postfix: " €"

Using prefix and postfix at the same time.

Screenshot

grid: true,
min: 0,
max: 100,
from: 21,
max_postfix: "+",
prefix: "Age: ",
postfix: " years"

Customising Grid

Divide the grid.

Screenshot

grid: true,
min: 0,
max: 100,
from: 20,
grid_num: 4

Screenshot

grid: true,
min: 0,
max: 100,
from: 20,
grid_num: 5

Callbacks

Using sliders callbacks.

Screenshot

min: 0,
max: 5,
from: 3,
prefix: "Warp factor: ",
grid: true,
grid_num: 5,
onStart: function (data) {
    // fired when range slider is ready
},
onChange: function (data) {
    // fired on every range slider update
    
	if (data.from <= 4) {
		console.log("Scotty, we need more power!");
	} else {
		console.log("Captain, she cannae take anymore!");
	}
	
},
onFinish: function (data) {
    // fired on pointer release
}

Twig logic

The Slider Parameters field can use Twig logic and even Craft element queries.

Screenshot

{% set values %}
    {% for i in currentUser.friendlyName|split('') %}
        "{{ i|upper }}"{{ not loop.last ? ',' }}
    {% endfor %}
{% endset %}

type: "double",
grid: true,
grid_num: {{ currentUser.friendlyName|length - 1 }},
values: [ {{ values }} ]

You can even fetch your Slider Parameters from a template.

{% include '_myRangeSliderParams' ignore missing %}

Skins

Big skin

Screenshot

min: 100,
max: 1000,
from: 550,
skin: "big"

Modern skin

Screenshot

min: 100,
max: 1000,
from: 550,
skin: "modern"

Sharp skin

Screenshot

min: 100,
max: 1000,
from: 550,
skin: "sharp"

Round skin

Screenshot

min: 100,
max: 1000,
from: 550,
skin: "round"

Square skin

Screenshot

min: 100,
max: 1000,
from: 550,
skin: "square"

Additional Options

See the original ion.rangeSlider project for additional options.

Templating

"Single" Range Slider fields return a single FROM value.

Screenshot

{{ entry.myRangeSliderField }}
// Prints something like: 550

"Double" Range Slider fields returns FROM and TO values, separated by ; character.

Screenshot

{{ entry.myRangeSliderField }}
// Prints something like: 200;800

{% set myRangeSliderField = entry.myRangeSliderField|split(';') %}

{{ myRangeSliderField[0] }}
// 200

{{ myRangeSliderField[1] }}
// 800

This plugin is based on the ion.rangeSlider plugin [MIT licence], with thanks to the original developer.

Brought to you by Lewis Jenkins.

Price includes 1 year of updates.
$10/year per site for updates after that.

Installation Instructions

To install this plugin, copy the command above to your terminal.

Active Installs
114
Version
1.0.0
License
Craft
Compatibility
Craft 3, Craft 4, Craft 5
Last release
July 21, 2019
Categories
Activity (30 days)
0
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs