Macrura

JqueryIonRangeSlider (pre-release)

Recommended Posts

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

58af974cc7343_Edit_Page__Test_Post__localhost.jpg.9da1e2ff2380dcb55d6929f9095d6ec8.jpg'

Same with different skin

58af975383b9d_Edit_Page__Test_Post__localhost.jpg.5ffb7f08af05dd5bafc014b0219ab2a3.jpg

Range of years

58af976072aed_Edit_Page__Test_Post__localhost.jpg.9b6000a901c2d86c42419442d1acdcb4.jpg

Same with narrower column and different skin..

58af976747944_Edit_Page__Test_Post__localhost.jpg.59641cfd93207195bb3427de50b41b6c.jpg

 

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

  • Like 15

Share this post


Link to post
Share on other sites

@Zeka

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

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites
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. 

slider.thumb.gif.b73efaa4b1933b2e1a2b670a61074430.gif

Share this post


Link to post
Share on other sites

@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.

 

  • Like 1

Share this post


Link to post
Share on other sites
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().

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By kixe
      Email Verification
      This module provides functions to validate email adresses and hosts. The module generates a textfile for blacklisted mailhosts (trashmail), which will be always up to date.
      Download
      https://modules.processwire.com/modules/email-verification/
      API
      // get module $mailcheck = $modules->get('EmailVerification'); // return bool/ string - automatted update of blacklist file $mailcheck->blacklisted(email|domain) // return bool - validate a top level domain, checks against IANA list $mailcheck->validTLD(tld) // return array of punycoded TLDs - cyclic updated, data pulled from IANA $mailcheck->getTLDs(cycle=2592000) // return bool - checks syntax converts to punycode $mailcheck->validDomainName(domain); // return bool - checks punycode encoded syntax $mailcheck->validHostName(host); // return bool - checks syntax and accessibility $mailcheck->validHost(email|domain) // add a single value to blacklist $mailcheck->addToBlacklist(email|domain) USAGE
      $mailcheck = $modules->get('EmailCheck'); $email = 'susi@trashmail.com'; if($mailcheck->blacklisted($email)) echo 'Email Provider not allowed'; if(!$mailcheck->validHost($email)) echo 'Mailhost not available'; Example blacklist file:  blacklist.txt
       
    • By teppo
      Code Blocks Textformatter is a tiny Textformatter module I cooked up to add support for code blocks to text/textarea/RTE fields on some of the sites I work with. Unlike a full-blown Markdown Textformatter – which is something that we already have in the core – this module simply adds support for fenced and inline code blocks.
      The syntax is based on the GitHub code block documentation, so please refer to that for additional instructions. The README at GitHub also includes some basic examples. As with any Textformatter, in order to enable this one, install it and enable it via field settings. Note that there's no syntax highlighting built in (at least for the time being), so use a tool of your choice for that – personally I prefer Prism.js.
      Since this module doesn't use a Markdown tool behind the scenes, but rather some home baked regular expressions, there's always the possibility that I've missed something – but please let me know if you use this module and run into any issues. On the other hand this module should be relatively fast and unobtrusive, as there are no unnecessary bits of code to run 
      GitHub repository: https://github.com/teppokoivula/TextformatterCodeBlocks Modules directory: http://modules.processwire.com/modules/textformatter-code-blocks/
    • By theo
      Here is my first processwire module (beta).
      https://github.com/theo222/ImagePickerField
      A lot of "first times". First time Github, Markdown and of course PW Modules.
      So be gentle please.
      I hope it works.

    • By horst
      Image Animated GIF  v 2.0.2
       
      Module for PW 2.5 stable or newer, but is obsolete for PW Versions greater then 3.0.89 (... read more ...)
       
      This module helps with resizing and cropping of animated GIFs when using the GD-Library.
      The GD-Library does not support this.


      This module is completely based upon the fantastic work of

         László Zsidi (http://www.gifs.hu/, builts the initial classes)
         xurei (https://github.com/xurei/GIFDecoder_optimized, enhanced the classes)


      I have ported it to a PW module and it works with core imagefields, together with Pia and with CropImagefields that uses the new naming scheme since PW 2.5.
       
      ------------------------------------------------------------------------------------------------------------------------------------------
      read more in this post about the rewrite from version 1.0.0 to version 2.0.0
      ------------------------------------------------------------------------------------------------------------------------------------------
      You can find it in the modules directory: https://modules.processwire.com/modules/image-animated-gif/
      and on Github: https://github.com/horst-n/ImageAnimatedGif
      ------
      A preview can be found here