PHPackages maxlazar/mx-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. maxlazar/mx-range-slider ActiveCraft-plugin maxlazar/mx-range-slider ======================== Is an easy, flexible and responsive range slider for Craft CMS with tons of options. 3.1.2(6y ago)05MITPHP Since Sep 13Pushed 6y ago1 watchersCompare [ Source](https://github.com/MaxLazar/mx-range-slider)[ Packagist](https://packagist.org/packages/maxlazar/mx-range-slider)[ RSS](/packages/maxlazar-mx-range-slider/feed)WikiDiscussions master Synced today READMEChangelog (2)Dependencies (1)Versions (4)Used By (0) MX Range Slider plugin for Craft CMS 3.x ======================================== [](#mx-range-slider-plugin-for-craft-cms-3x) Is an easy, flexible and responsive range slider for Craft CMS with tons of options. [![Screenshot](resources/img/mx-rangeslider-craft.gif)](resources/img/mx-rangeslider-craft.gif) Requirements ------------ [](#requirements) This plugin requires Craft CMS 3.0.0-beta.23 or later. Installation ------------ [](#installation) 1. Install with Composer via `composer require maxlazar/mx-range-slider` from your project directory 2. Install plugin in the Craft Control Panel under Settings > Plugins You can also install MX Range Slider via the **Plugin Store** in the Craft Control Panel. MX Range Slider Overview ------------------------ [](#mx-range-slider-overview) Configuring MX Range Slider --------------------------- [](#configuring-mx-range-slider) OptionData-AttrDefaultsTypeDescription`skin``data-skin``flat`stringChoose UI skin to use (flat, big, modern, round, sharp, square)`type``data-type``single`stringChoose slider type, could be `single` - for one handle, or `double` for two handles`min``data-min``10`numberSet slider minimum value`max``data-max``100`numberSet slider maximum value`from``data-from``min`numberSet start position for left handle (or for single handle)`to``data-to``max`numberSet start position for right handle`step``data-step``1`numberSet sliders step. Always > 0. Could be fractional`min_interval``data-min-interval``-`numberSet minimum diapason between sliders. Only for **double** type`max_interval``data-max-interval``-`numberSet minimum maximum between sliders. Only for **double** type`drag_interval``data-drag-interval``false`booleanAllow user to drag whole range. Only for **double** type`values``data-values``[]`arraySet up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, can no longer be changed`from_fixed``data-from-fixed``false`booleanFix position of left (or single) handle`from_min``data-from-min``min`numberSet minimum limit for left (or single) handle`from_max``data-from-max``max`numberSet maximum limit for left (or single) handle`from_shadow``data-from-shadow``false`booleanHighlight the limits for left handle`to_fixed``data-to-fixed``false`booleanFix position of right handle`to_min``data-to-min``min`numberSet minimum limit for right handle`to_max``data-to-max``max`numberSet maximum limit for right handle`to_shadow``data-to-shadow``false`booleanHighlight the right handle`prettify_enabled``data-prettify-enabled``true`booleanImprove readability of long numbers: 10000000 → 10 000 000`prettify_separator``data-prettify-separator`` `stringSet up your own separator for long numbers: 10000000 → 10,000,000 etc.`prettify``-``null`functionSet up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates`force_edges``data-force-edges``false`booleanSliders handles and tooltips will be always inside it's container`keyboard``data-keyboard``true`booleanActivates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.`grid``data-grid``true`booleanEnables grid of values above the slider`grid_margin``data-grid-margin``true`booleanSet left and right grid gaps`grid_num``data-grid-num``4`numberNumber of grid units`grid_snap``data-grid-snap``false`booleanSnap grid to sliders step (step param). If activated, grid\_num will not be used. Max steps = 50`hide_min_max``data-hide-min-max``false`booleanHides **min** and **max** labels`hide_from_to``data-hide-from-to``false`booleanHides **from** and **to** labels`prefix``data-prefix```stringSet prefix for values. Will be set up right before the number: \*\*$\*\*100`postfix``data-postfix```stringSet postfix for values. Will be set up right after the number: 100**k**`max_postfix``data-max-postfix```stringSpecial postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example **0 — 100+**`decorate_both``data-decorate-both``true`booleanUsed for **double** type and only if prefix or postfix was set up. Determine how to decorate close values. For example: **$10k — $100k** or **$10 — 100k**`values_separator``data-decorate-both``-`stringSet your own separator for close values. Used for **double** type. Default: **10 — 100**. Or you may set: **10 to 100, 10 + 100, 10 → 100** etc.`disable``data-disable``false`booleanLocks slider and makes it inactive. Input is disabled too. Invisible to forms`block``data-blokc``false`booleanLocks slider and makes it inactive. Input is NOT disabled. Can be send with forms`extra_classes``data-extra-classes``—`stringTraverse extra CSS-classes to sliders container`scope``-``null`objectScope for callbacks. Pass any object`onStart``-``null`functionCallback. Is called on slider start. Gets all slider data as a 1st attribute`onChange``-``null`functionCallback. IS called on each values change. Gets all slider data as a 1st attribute`onFinish``-``null`functionCallback. Is called when user releases handle. Gets all slider data as a 1st attribute`onUpdate``-``null`functionCallback. Is called when slider is modified by external methods `update` or `reset`Using the MX Range Slider plugin in your templates -------------------------------------------------- [](#using-the-mx-range-slider-plugin-in-your-templates) ``` from {{ entry.range_field.from }} to {{ entry.range_field.to }} value {{ entry.range_field.value }} ``` MX Range Slider Roadmap ----------------------- [](#mx-range-slider-roadmap) - Release it ### License [](#license) The MX RangeSlider for CraftCMS CE is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT) ### Thanks To [](#thanks-to) [Denis Ineshin](https://github.com/IonDen) for [ion.rangeSlider](https://github.com/IonDen/ion.rangeSlider) ([MIT license](http://opensource.org/licenses/MIT)) ### And one more thing [](#and-one-more-thing) Brought to you by [Max Lazar](https://www.wiseupstudio.com) ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community4 Small or concentrated contributor base Maturity60 Established project with proven stability How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 3 Last Release 2430d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/925802?v=4)[Max Lazar](/maintainers/maxlazar)[@MaxLazar](https://github.com/MaxLazar) --- Tags cmsCraftcraftcmscraft-pluginmx range slider ### Embed Badge ![Health badge](/badges/maxlazar-mx-range-slider/health.svg) ``` [![Health](https://phpackages.com/badges/maxlazar-mx-range-slider/health.svg)](https://phpackages.com/packages/maxlazar-mx-range-slider) ``` ### Alternatives [nystudio107/craft-seomatic SEOmatic facilitates modern SEO best practices & implementation for Craft CMS 5. It is a turnkey SEO system that is comprehensive, powerful, and flexible. 1741.4M46](/packages/nystudio107-craft-seomatic)[verbb/image-resizer Resize assets when they are uploaded. 127269.1k7](/packages/verbb-image-resizer)[verbb/formie The most user-friendly forms plugin for Craft. 101372.9k40](/packages/verbb-formie)[verbb/tablemaker Create customizable and user-defined table fields. 40168.8k1](/packages/verbb-tablemaker)[wrav/oembed A simple plugin to extract media information from websites, like youtube videos, twitter statuses or blog articles. 36205.0k3](/packages/wrav-oembed)[verbb/hyper A user-friendly links field for Craft. 24130.9k9](/packages/verbb-hyper) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)