Price slider into formular

Hello,

i have use this price slider currently: https://refreshless.com/nouislider/

it is a nice one normaly, but i have get problems and i am not sure at moment if i have make somethink wrong or if with this solution it is not possible to do what i need.

What i need is this, i have 5 menues, in every menue is a HTML formular element and into this formular i put this price slider.

When i did used just one price slider it was working, only on a smartphone i did see not everythink was working fine, maybe because i did use 2 price sliders in the same formular, i dont know.

And now i have put into the next menue a price slider and the results was both did not work anymore. i did checked the javascript and i have give all IDs different names, but that have not slove the problem.

Now i am thinking abouth, where to find a price slider wich dont make much problem, do you know one?

I need to be able to select a price range “from - to” with this slider.

You didn’t show any code so we have to guess how you have set each one up? From the documentation you would set each up with its respective ID’s e.g.



var slider = document.getElementById('slider');

noUiSlider.create(slider, {
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});

// add another one (slider2)

var slider2 = document.getElementById('slider2');

noUiSlider.create(slider2, {
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});
1 Like

I have make it simular like in your example, i have modify the javascript code and did write different names for the variables.
But currently i have 2 problems and this is the link to my test site: http://neuecommunity.bplaced.net/responsive/slidertest.php

problems:
1: when i open the site on my smartphone i have a problem when i modify the price range then the slider from above moves the slider from below. in a normal browser it works, but on a smartphone both sliders are moving when you just want to move one of them.

problem 2: the menus dont open, if you click for example on alloy, then a dropdown menu must opens.

You don’t seem to have a link to jquery in that example?

If you addd jquery the dropdown still won’t work as you are adding two event handlers to the same element.

You have this:

              <script type="text/javascript">
        jQuery(function ($) {
        var checkList = $('.dropdown-check-list');
        checkList.on('click', 'span.anchor', function(event){
            var element = $(this).parent();

            if ( element.hasClass('visible') )
            {
                element.removeClass('visible');
            }
            else
            {
                element.addClass('visible');
            }
        });
    }); 
    </script>

But you also have this as well:


             <script type="text/javascript">

        jQuery(function ($) {
        var EAcheckList = $('.dropdown-check-list');
        EAcheckList.on('click', 'span.anchor', function(event){
            var EAelement = $(this).parent();

            if ( EAelement.hasClass('visible') )
            {
                EAelement.removeClass('visible');
            }
            else
            {
                EAelement.addClass('visible');
            }
        });
    });
    </script>

If you delete the first script then the dropdowns will work.

The sliders seem to be working on my iphone ok.

Someone else will have to jump on now as I am just about to leave for a weeks break abroad. :slight_smile: (This question should probably go in the JS forum anyway).

how would it look to create own event for every element?
the part where the event is build is done in the following code or?

var EAcheckList = $('.dropdown-check-list');

must i create a own CSS class “dropdown-check-list” for every formular to slove the problem? Or can i just add 2 differents IDs to every formular and create the even with the IDs?

I’m not sure what you are asking exactly?

You only need the one script to activate all the dropdowns that have a class of .dropdown-check-list. You don;t need a script for each one as they all do the same thing.

I’ll move the thread to the JS forum anyway as I am away for a week now.

1 Like

I understand and it works now with only one script for all dropdows, thanks for the tip.

Then my last problem is this slider, i have a samsung smartphone and in my browser the slider does change both the above one and the below one. Only if i make a fast click then i can sometimes move only one slider, but it dont work right like it should and like it do on the laptop browser.

If you say on your iphone it works correct then maybe its only my samsung phone problem.

Is it anyway possible to check many different mobile phone browsers with a special browser or site?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.