CSS Slider

Hello,

I use Rapidweaver's Foundation to build websites.
It has a slider function for a form.
Looks like this:


I would like it to look like this, with 2 sliders.


Any way this is possible?
Really stuck on this!

Thanks in advance

 

Yeah it's totally possible. What's the control originally made with? JavaScript I imagine?

Regardless the logic is the same. Instead of returning a value based on a single knob, it'll return a range of values between knob 1 and knob 2. You could return the range as an array if that's necessary or return the two values and iterate from the lowest value to obtain values in between the lowest value and the highest. Make sense?

 

I'm not sure, I guess it is in JavaScript yes.

It does make sense, but I'm not sure how to do so. Could probably find a guide on that tho. Thanks though!

 

I'm not sure what you're using, but I'd read the documentation of that and they likely have a simple option to switch from single slider to range slider. If not, there's dozens of plugins that do the same thing you could get.

Often times in a plugin it'll have an object of options like:

options = {
type: range,
startValue: 0,
endValue: 80
}

That's just a made up example and you may be using something that isn't a plugin at all. But when using javascript, jQuery, Polymer, and React plugins and others, they'll have something similar to that or along those same lines.