PHPackages                             lewisjenkins/craft-range-slider - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. lewisjenkins/craft-range-slider

ActiveCraft-plugin[Utility & Helpers](/categories/utility)

lewisjenkins/craft-range-slider
===============================

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

5.0.0(2y ago)04.7k[2 issues](https://github.com/lewisjenkins/craft-range-slider/issues)proprietaryPHP

Since Jul 21Pushed 2y agoCompare

[ Source](https://github.com/lewisjenkins/craft-range-slider)[ Packagist](https://packagist.org/packages/lewisjenkins/craft-range-slider)[ RSS](/packages/lewisjenkins-craft-range-slider/feed)WikiDiscussions master Synced today

READMEChangelog (4)Dependencies (1)Versions (5)Used By (0)

LJ Range Slider plugin for Craft CMS
====================================

[](#lj-range-slider-plugin-for-craft-cms)

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

Requirements
------------

[](#requirements)

This plugin requires Craft 4 or 5.

Installation
------------

[](#installation)

You can install the plugin via the Craft Plugin Store.

LJ Range Slider Overview
------------------------

[](#lj-range-slider-overview)

This plugin adds the following fieldtype:

- LJ Range Slider

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/1.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/1.png)

#### Simple start, basic params

[](#simple-start-basic-params)

Set min value, max value and start point.

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/2.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/2.png)

```
min: 100,
max: 1000,
from: 550

```

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

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/3.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/3.png)

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

```

#### Set up range and step

[](#set-up-range-and-step)

Set up range with negative values.

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/4.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/4.png)

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

```

Force fractional values, using fractional step 0.1.

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/5.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/5.png)

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

```

#### UI controls

[](#ui-controls)

Hide min and max labels

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/21.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/21.png)

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

```

Hide from and to labels

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/22.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/22.png)

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

```

#### Using array of custom values

[](#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](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/6.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/6.png)

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

```

Values array could be anything, even strings.

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/7.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/7.png)

```
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).

[](#change-visual-look-of-numbers-prettify)

Improve readability of big numbers, like 1000000.

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/8.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/8.png)

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

```

#### Decorating numbers with prefixes, postfixes and other symbols.

[](#decorating-numbers-with-prefixes-postfixes-and-other-symbols)

Adding currency symbol and + symbol to the maximum number.

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/9.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/9.png)

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

```

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/10.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/10.png)

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

```

Using prefix and postfix at the same time.

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/11.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/11.png)

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

```

#### Customising Grid

[](#customising-grid)

Divide the grid.

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/12.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/12.png)

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

```

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/13.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/13.png)

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

```

#### Callbacks

[](#callbacks)

Using sliders callbacks.

[![Screenshot](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/19.png)](https://raw.githubusercontent.com/lewisjenkins/craft-range-slider/master/resources/img/19.png)

```
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