Dynamic slider range

Anonymous

#45628

Hi, is there option to update max and min value in range slider and update it with jQuery?

Trevor

#45654

Ross may need to answer this one.

Ross Moderator

#45974

Hi Arek

Sure you can access the slider plugin we use, and modify the values… Here is some sample code:

var slider_object = $('.searchandfilter .sf-field-post-meta-_price').find(".meta-slider")[0];
slider_object.noUiSlider.set(['22', null]); //if you want to update the min value
slider_object.noUiSlider.set([null, '100']); //if you want to update the max value
slider_object.noUiSlider.set(['123', '625']); //if you want to update both values

For each field in S&F, there is usually a parent li, which will have a class attached specifically to target that field (and the slider).

For a post meta key of _price, the class I used was .sf-field-post-meta-_price – so take a look at the markup of hte search form for your field.

Then this should be fairly self explanatory –
var slider_object = $('.searchandfilter .sf-field-post-meta-_price').find(".meta-slider")[0];
The first line finds the meta slider itself and puts it into a variable.

The next lines simply set the values.

Hope that helps

Anonymous

#46330

I don’t know why but its not working 🙂
Nothing happens when I pust this code and there is no errors in console

Anonymous

#46335

Wait by bad. Its woring but its set only slider to those values. I need to update MAX and MIN values.

Ross Moderator

#46666

Hey Arek

I’ve just done a quick update to the plugin which should allow you to change the slider min / max settings (not their actual values).

Install the update I’ve just emailed to you, by following:

1) disable S&F (do not delete via wp-admin)
2) via FTP upload and replace the existing S&F in – wp-content/plugins/search-filter-pro/
3) enable S&F via wp-admin

After this you can use the following filter to change the min max:

function change_slider_min_max($input_object, $sfid)
{
	if(($input_object['name']=='_sfm__price')&&(($input_object['type']=='range-slider')||($input_object['type']=='range-number')))
	{
		$input_object['attributes']['data-min'] = 10;
		$input_object['attributes']['data-max'] = 200;
		
	}
	
	return $input_object;
}
add_filter('sf_input_object_pre', 'change_slider_min_max', 10, 2);

Check here for a full example of how to use the filter:

https://gist.github.com/rmorse/7b59b45a14b1ca179868

Thanks

[Author]

Posts