How to disable 1 of the Range Slider Handle

Anonymous

#74489

Hello,

I want to disable one of the range slider handles.

I want only one handle in the range slider. Please refer the below image. i want to remove the handle on the right side which is rounded in red colour.

Currently i have hide the second one using CSS but if we click that portion it will change.

So need a workaround to disable the range slider handle.

Trevor

#74882

I will need to refer this to Ross, the developer.

Anonymous

#75030

Okay! Waiting to hear from you.

Thanks

Ross Moderator

#75172

Hey Jeykumar

I’m not sure the code off the top of my head, I’ll try to have a look, but I’m sure our sliders (powered by NoUISlider) has some functions to do this.

I’ll see if I can knock something together for you… I’m away at the moment so will likely be monday, probably when I do the other fixes I mentioned too 🙂

Give me a nudge if you don’t hear from me on Monday.

Thanks

Anonymous

#75274

Hey Ross,

Thanks for your prompt reply.

Yes i too saw some workarounds for (NoUISlider) this. but not sure how to implement in this plugin.

Will wait till monday and ping you on this.

Thanks.

Ross Moderator

#75741

Hey Jeykumar

I messaged you earlier about the update sent.

In addition I figured out how to access the nouislider from outside S&F and disable a handle:

var slider = jQuery('.sf-field-post-meta-_price .meta-slider')[0];
var origins = slider.getElementsByClassName('noUi-origin');
origins[0].setAttribute('disabled', true);

Just to note, .sf-field-post-meta-_price is a class specific to a field in my setup – check the markup of yours to find the right class to use (this class is added on each <li>, for every field and is related to the meta key you are using, in my case it was “_price”)

Also origins[0] means left handle, and origins[1] would mean the right handle.

Best

Anonymous

#75870

Hey Ross,

I disabled the handle using the above method.
But its working fine only one time.
After filtering and when the result loads, Its not working.

Hope you understood.

Thanks.

Trevor

#76535

Hi

You mean after Ajax is used?

If you have written the code as a separate script and given it a function name, you also need to call that after ajax has finished.

See the ajax finished example (not the others) on the FAQ page:

https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

Ross Moderator

#76948

Yup, when an ajax request completes the form is reloaded, so the script you added is no longer working.

Detect when an ajax request completes using the info at the link above:

//depending on where you add your JS, sometimes its necessary to wrap the above events in a function (as is standard practise):
(function ( $ ) {
	"use strict";
	
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		//add your script here again
		var slider = jQuery('.sf-field-post-meta-_price .meta-slider')[0];
		var origins = slider.getElementsByClassName('noUi-origin');
		origins[0].setAttribute('disabled', true);
	});
}(jQuery));

Thanks

Anonymous

#78438

Hey Ross,

Thanks a lot. That worked like a charm 🙂

[Author]

Posts