List filter range render as a slider

[aclertant]

Hi,

I cant believe that I'm the first to ask... I probably miss something ;o)

After searching +100 pages on this forum, it seems that nobody need to render any Range Filter as a slide bar with two slider... Or it is an option to enable I forgot?

My element is a decimal field (like price stuff) from 0,01 to 100 max. Is there a way to have a slider in the filter list view like the slider element ?

Thank's a lot;

 

[cheesegrits]

Nope.

-- hugh

 

[aclertant]

That my first "nope" from you Make me almost crying...

But glade to see you well ;o)

 

[cheesegrits]

Yeah, sorry, it'd be a lot of work. Not impossible, but it'd have to be something we got funded to do.

-- hugh

 

[aclertant]

Ok here it is :

You need to include this jquery plugin : here
plus this js function in your domready function (in your joomla template).

$('.nstSlider').nstSlider({
    "left_grip_selector": ".leftGrip",
    "right_grip_selector": ".rightGrip",
    "crossable_handles": false,
    "value_bar_selector": ".bar",
    "value_changed_callback": function(cause, leftValue, rightValue) {
        var $container = $(this).parent();
        $container.find('.min').val(leftValue);
        $container.find('.max').val(rightValue);
        $container.find('.leftLabel').text(leftValue);
        $container.find('.rightLabel').text(rightValue);
    }
});

In Components/com_fabrik/models/element.php @line 3352
Replace the function by this one :

/**
     * Build ranged filter fields either as two dropdowns or two hidden fields
     *
     * @param   array   $default  Filter values
     * @param   array   &$return  HTML to return
     * @param   array   $rows     Filter list options
     * @param   string  $v        Filter name
     * @param   string  $type     Show ranged values as a list or hidden
     *
     * @since  3.0.7
     *
     * @return void
     */


protected function rangedFilterFields($default, &$return, $rows, $v, $type = 'list')
    {
        $element = $this->getElement();
        $class = $this->filterClass();
        $attribs = 'class="' . $class . '" size="1" ';
        $default = (array) $default;
    
        if (count($default) === 1)
        {
            $default[1] = '';
        }
    
        $def0 = array_key_exists('value', $default) ? $default['value'][0] : $default[0];
        $def1 = array_key_exists('value', $default) ? $default['value'][1] : $default[1];
        $min = floor($rows[1]->value);
        $max = ceil($rows[count($rows) - 1]->value);
        if($def0 == ''){$def0 = $min;}
        if($def1 == ''){$def1 = $max;}

        if ($type === 'list')
        {
            $return[] = '<div class="nstSlider" data-range_min="' . $min . '" data-range_max="' . $max . '" data-cur_min="' . $def0 . '"  data-cur_max="' . $def1 . '">';
            $return[] = '<div class="bar"></div>';
            $return[] = '<div class="leftGrip"></div>';
            $return[] = '<div class="rightGrip"></div></div>';
            $return[] = '<div class="leftLabel"></div><div class="rightLabel"></div>';
            $return[] = '<input type="hidden" class="min ' . $class . '" name="' . $v . '[0]" value="' . $def0 . '" id="' . $element->name . '_filter_range_0" />';
            $return[] = '<input type="hidden" class="max ' . $class . '" name="' . $v . '[1]" value="' . $def1 . '" id="' . $element->name . '_filter_range_1" />';
        }
        else
        {
            $return[] = '<input type="hidden" class="' . $class . '" name="' . $v . '[0]" value="' . $def0 . '" id="' . $element->name . '_filter_range_0" />';
            $return[] = '<input type="hidden" class="' . $class . '" name="' . $v . '[1]" value="' . $def1 . '" id="' . $element->name . '_filter_range_1" />';
        }
    }

The only problem is that it convert all the range filter. And it won't survive an update.
But for me it work ;o)

 

[jerkpork]

Drats! I wish this worked for me as well because the dropdowns are really clunky. I gave it a try and the slider does appear, but sadly the slider does not slide for me.

 

[aclertant]

You should check your domready function and if the values is implemented properly in the right place inside the nstSlider div (check your source code).
I had a trouble with the value itself. I had to replace both round() function by a ceil() and a floor() function for the min and max value. Because one of my filter had stuff like this, 1.33 or 5,87, etc. But rounding it to higer or lower integer make it working and is ok for me

Good luck, it can work !

 

[jerkpork]

It's over my head. I don't know anything about javascript so I probably put your javascript code in the wrong place.

 

[aclertant]

try this :

    protected function rangedFilterFields($default, &$return, $rows, $v, $type = 'list')
    {
        $element = $this->getElement();
        $class = $this->filterClass();
        $attribs = 'class="' . $class . '" size="1" ';
        $default = (array) $default;
      
        if (count($default) === 1)
        {
            $default[1] = '';
        }
      
        $def0 = floor($rows[1]->value);
        $def1 = ceil($rows[count($rows) - 1]->value);

        if ($type === 'list')
        {
            $return[] = '<div class="nstSlider" data-range_min="0" data-range_max="100" data-cur_min="0"  data-cur_max="100">';
            $return[] = '<div class="bar"></div>';
            $return[] = '<div class="leftGrip"></div>';
            $return[] = '<div class="rightGrip"></div></div>';
            $return[] = '<div class="leftLabel"></div><div class="rightLabel"></div>';
            $return[] = '<input type="hidden" class="min ' . $class . '" name="' . $v . '[0]" value="' . $def0 . '" id="' . $element->name . '_filter_range_0" />';
            $return[] = '<input type="hidden" class="max ' . $class . '" name="' . $v . '[1]" value="' . $def1 . '" id="' . $element->name . '_filter_range_1" />';
        }
        else
        {
            $return[] = '<input type="hidden" class="' . $class . '" name="' . $v . '[0]" value="' . $def0 . '" id="' . $element->name . '_filter_range_0" />';
            $return[] = '<input type="hidden" class="' . $class . '" name="' . $v . '[1]" value="' . $def1 . '" id="' . $element->name . '_filter_range_1" />';
        }
    }

If it dont slide, you have a js problem

 

[jerkpork]

try this :

    protected function rangedFilterFields($default, &$return, $rows, $v, $type = 'list')
    {
        $element = $this->getElement();
        $class = $this->filterClass();
        $attribs = 'class="' . $class . '" size="1" ';
        $default = (array) $default;
     
        if (count($default) === 1)
        {
            $default[1] = '';
        }
     
        $def0 = floor($rows[1]->value);
        $def1 = ceil($rows[count($rows) - 1]->value);

        if ($type === 'list')
        {
            $return[] = '<div class="nstSlider" data-range_min="0" data-range_max="100" data-cur_min="0"  data-cur_max="100">';
            $return[] = '<div class="bar"></div>';
            $return[] = '<div class="leftGrip"></div>';
            $return[] = '<div class="rightGrip"></div></div>';
            $return[] = '<div class="leftLabel"></div><div class="rightLabel"></div>';
            $return[] = '<input type="hidden" class="min ' . $class . '" name="' . $v . '[0]" value="' . $def0 . '" id="' . $element->name . '_filter_range_0" />';
            $return[] = '<input type="hidden" class="max ' . $class . '" name="' . $v . '[1]" value="' . $def1 . '" id="' . $element->name . '_filter_range_1" />';
        }
        else
        {
            $return[] = '<input type="hidden" class="' . $class . '" name="' . $v . '[0]" value="' . $def0 . '" id="' . $element->name . '_filter_range_0" />';
            $return[] = '<input type="hidden" class="' . $class . '" name="' . $v . '[1]" value="' . $def1 . '" id="' . $element->name . '_filter_range_1" />';
        }
    }

If it dont slide, you have a js problem

Thanks for the effort! I tried it but unfortunately no luck.

 

[aclertant]

So you just dont place the js part at the right place.
Or the jquery version you use in your site is not compatible.

You should check the ntslider website ;o) it's a very simple script !
You really did the worth...