module JqueryIonRangeSlider (pre-release)

[Macrura]

Released:

http://modules.processwire.com/modules/jquery-ion-range-slider/

The built in rangeslider is good, but it is somewhat limited if you need really specific slider interfaces, like with pips and showing the value on the handles.

There are many Jquery rangesliders, but one of the best and easiest to implement is the ion.rangeSlider.
http://ionden.com/a/plugins/ion.rangeSlider/en.html

This is a preview of the very simple module that basically allows you to enable the ion.Rangeslider on any text input, and then you type in your params into the textarea field (careful, you can break the page's javascrpt if you are not careful!) There are way too many options to really make this configurable, so the easiest way it to have a free text field where you enter any params. The params are just passed to the instance of the slider.

Features of ion.Rangeslider:

• Skin support. (5 skins included and PSD for skin creation)
• Any number of sliders at one page without conflicts and big performance problems
• Two slider types single (1 slider) and double (2 sliders)
• Support of negative and fractional values
• Ability to set custom step and snap grid to step
• Support of custom values diapason
• Customisable grid of values
• Ability to disable UI elements (min and max, current value, grid)
• Postfixes and prefixes for your numbers ($20, 20 € etc.)
• Additional postfix for maximum value (eg. $0 — $100+)
• Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
• Slider writes its value right into input value field. This makes it easy to use in any html form
• Any slider value can be set through input data-attribute (eg. data-min="10")
• Slider supports disable param. You can set it true to make slider inactive
• Slider supports external methods (update, reset and remove) to control it after creation
• For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
• Slider supports date and time

 

Screenshots comparing Inputfield Rangeslider (Soma) vs. JqueryIonRangeSlider...

1) basic range using currency

'

Same with different skin

Range of years

Same with narrower column and different skin..

 

the module is functional and being used on 1 site, but some additional testing is needed...

[Martijn Geerts]

Lovely!

[Harmen]

Looks great! Looking forward to implement this!

[Macrura]

Here is the pre-release of the module.

https://github.com/outflux3/JqueryIonRangeSlider

once it has been tested a bit more, it will be in the directory..

EDIT: In directory:

http://modules.processwire.com/modules/jquery-ion-range-slider/

[Zeka]

Hi @Macrura

Nice module, but doesn't work in repeater

[Macrura]

@Zeka

ok i changed the javascript, it works here in test environment in repeaters, let me know if it works for you..

[Zeka]

Hi @Macrura

Just tested the latest version from your repo and it works with repeaters partially.  

It works in two cases:

1. If "Repeater item visibility in editor" set to "Always open".

2. If "Repeater item visibility in editor" set to "News items open, existing items collapsed" (default option) and you have some other field with the slider on this page, but outside of repeater items or any other dynamically loaded element.

The same with Repeater Matrix. 

And I have found one more strange behavior:

1. Create field and load any predefined settings (works) 

2. Clean settings textarea and choose any other predefined settings after that it doesn't work.

3. Change "slider skin" setting to any other and it will work again. 

Have tested it with Profield Textareas and it works.

 

 

[Macrura]

ok thanks for the reports, i will work on the repeater support and also troubleshoot the loading of settings... will post back asap.

[Macrura]

can't seem to be able to init the rangeslider when the ajax loads the repeater; anyone out there know how to do this? Once there is a solution to re-init the field on the ajax opening of the repeater, that should solve the first issue.

in terms of the 2nd question, are you saving again after loading the params?

Quote

"Once you load new params, you must save again to commit them to the database."

everything works correctly in terms of preset loading here, and not needing to change the skin; can you confirm if you saved the field after loading the new settings?

[Mike Rockett]

1 hour ago, Macrura said:

can't seem to be able to init the rangeslider when the ajax loads the repeater; anyone out there know how to do this? Once there is a solution to re-init the field on the ajax opening of the repeater, that should solve the first issue.

The issue is that the script won't be imported if only text fields in a repeater are using a slider. The field is not rendered until AJAX-time, and so the script cannot be imported. I'd recommend that you simply load the assets at page-edit time (separate hook).

Alternatively, and this is just an untested theory because I need to rush out, maybe you should rather hook to the page edit event instead of the text render event. You could then check for all fields (repeaters too) on the page to see if they need a range slider, and then import the assets. That way, all fields are considered, and the event-fired will bubble from the repeater, thus setting the slider.

[Zeka]

2 hours ago, Macrura said:

can't seem to be able to init the rangeslider when the ajax loads the repeater; anyone out there know how to do this? Once there is a solution to re-init the field on the ajax opening of the repeater, that should solve the first issue.

in terms of the 2nd question, are you saving again after loading the params?

everything works correctly in terms of preset loading here, and not needing to change the skin; can you confirm if you saved the field after loading the new settings?

In terms of the 2nd question. Yes, I save settings page of a field after every change. 

Once again: 

1. Create a text field and enable Ion Slider ( Do not load any skin or setting of the slider ). Save. 

2. Put this field to any template. Save.

3. Create a page with this template. Slider won't work because there are no params. Save.

4. Load any params in the setting of the field. Save. Params are loaded and visible in textarea. Go to the page that you've created and refresh the page. Slider won't work.

5. Change skin in settings. Save. Go to page. Slider works. 

Here is screencast from the 3rd step. 

[Macrura]

@Zeka

As far as I can tell from your screencast,  you are not saving again, after the params are loaded - in other words:

1) clear field
2) select preset
3) Save
4) optional, edit or view the loaded params
5) Save (again)

I followed your exact steps, however as i said you are not saving 2x - that is essential to commit the settings to the database. It is not necessary to change the skin, in your step 5.

In other news, the latest commit should fix the repeater problem, it was just a super simple matter of hooking into the renderReadyHook, instead of the plain render, because the repeater will actually run the renderReady on every inputfield within the repeater itself which forces the assets to load.

 

[Robin S]

On 05/09/2017 at 1:41 AM, Macrura said:

In other news, the latest commit should fix the repeater problem, it was just a super simple matter of hooking into the renderReadyHook, instead of the plain render, because the repeater will actually run the renderReady on every inputfield within the repeater itself which forces the assets to load.

Just be aware that, as with the similar change made to SelectizeImageTags, the module will now require a minimum of PW v3.0.61 - would be good to add that as a requirement in getModuleInfo().

 

[Macrura]

aw snap - i thought i tested this on a 2.7.3 site