Jump to content

jQuery UI Range Slider Fieldtype


Recommended Posts

Thanks Horst for bringing this up. I tried some things with using this fieldtype as config field. But it wasn't saving correctly due to it's value type of object.

I made some major changes to this fieldtype. In short, the value now is handled as an array value and not as RangeSlider object anymore.

See upgrade and changelog here: https://github.com/somatonic/FieldtypeRangeSlider#upgrade-notes

(BTW Also renamed the module repo to FieldtypeRangeSlider)

These changes now also allow for using the Inputfield as a config field in modules. Previously it wasn't possible, as the value saved wasn't treated as array. Simplest solution seemed to make the Inputfield implement InputfieldHasArrayValue. 

Regarding the defaultValue.

This was only set and used in the Fieldtype and not Inputfield! So the defaultValue will be set to the field value. Inputfield then just deals with the value min and max.

Since when using this module as a config field only, there's no fieldtype involved at all.

Here just an example how to handle it as a config field.

    protected static $defaults = array(
            'myrange' => array('min' => 10, 'max' => 90),
            'myslider' => array('min' => 10)

    public static function getModuleConfigInputfields(array $data){

        $data = array_merge(self::$defaults, $data);

        $fieldset = new InputfieldWrapper();
        $modules = wire('modules');

        // range with two values
        $field = $modules->InputfieldRangeSlider;
        $field->attr('name', 'myrange');
        $field->attr('value', array(
            'min' => $data['myrange']['min'],
            'max' => $data['myrange']['max'])
        $field->isrange = true;
        $field->width = 90;
        $field->minValue = 1; // min value config
        $field->maxValue = 100; // max value config
        $field->step = 1;
        $field->label = 'Slider 2 range values';

        // no range, only single value
        $field = $modules->InputfieldRangeSlider;
        $field->attr('name', 'myslider');
        $field->attr('value', array(
            'min' => $data['myslider']['min'])
        $field->isrange = false;
        $field->width = 90;
        $field->minValue = 1;
        $field->maxValue = 100;
        $field->step = 1;
        $field->label = 'Slider 1 value';

        return $fieldset;

  • Like 4
Link to comment
Share on other sites

  • 2 years later...
  • 2 years later...

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

  • Create New...