Struggling connecting Foundation slider to my js?

Hi all.

So I have this working using a plain html/css setup , at least to connect to JS.
When I move the slider then, then the views/prices update and toggling works fine too then.

But the idea is that the slider has a different colored track up until the slider thumb, then after the thumb (see the design folder in github)

I tried to achieve that with ::-ms-fill-lower , but couldn’t get it to work.
So finally found foundation : Foudation sliders doc

It sortof works when I move the slider, but only after toggling the monthly/annually button and moving the slider, not on load and not by just moving the slider (like it does correctly using html/css)

Any ideas what I’m doing wrong? I’m totally new to foundation.

my github


1 Like

Here’s my hypothesis. Because you aren’t modifying the slider directly, the ‘change’ listener isn’t being fired meaning the price won’t update. If you used something like:

    <input id='views' type="range" min="10" max="250" step="10">

A native range slider will update things well and with the correct sass, will display properly too.


Thanks. I had that first and got it working, thought not looking correctly. I had to try Foundation because of the difficulty in getting the correct look.

I figured it out now , at least the looks and function are there.
Tomorrow I will try to switch the slider thumb for the image that I need to use, see if I manage that :stuck_out_tongue:

1 Like

Actually I’ve been playing around with it all a while.
I can get the slider I want (though not with correct colors/thumb) , but with the color before the thumb when I use

<input class='outer__second'  id='views' type="range" step='10' min="10" max="250" value="125">

without foundation.
But my &__second{ ....} (&::webkit-slider-thumb etc )code won’t be applied .
And if I place the above input code within a div

<div class='outer__second'>
  <input  id='views' type="range" step='10' min="10" max="250" value="125">

Then the colors/thumb within the &__second{ ....} are applied, but I no longer have the highlighted color before the thumb.

is it because it needs to be applied to a block level element to work?
I just need the colors/thumb from the &__second{ ....} applied , so it also has the highlighted color before the thumb.

Am I making sense? Hope someone can help.

There isn’t support for a second handle unfortunately. But because the root functionality is there and working, I call it a win.

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