Menu icon Foundation
Range Slider Custom Range/Variable Set

Hello,

I'm trying to create a pricing slider. This slider will tell you how much a product costs per month depending on the number of users. I have an image below the slider that has a scale the with number of users.

I would like to customize each range item. So that when you're over 25 users, it will say $125. I would cusotmize each one and the last one would say Call Us!

How do I accomplish this? Do I added values to the Data-Options?

I've attached an image of what it looks like now and I've pasted the code that I have in there now.

Thanks,

Ian

<div class="row">
 <div class="small-12 centered-text" style="font-size:4rem;padding-bottom:20px;">
    <span>$</span><span id="sliderOutput3"></span><span>/month</span>
  </div>
  <div class="small-12 columns">
    <div class="range-slider" data-slider data-options="start: 125; end: 1125; step: 20; display_selector: #sliderOutput3;">
      <span class="range-slider-handle" role="slider" tabindex="0"></span>
      
    </div>

  </div>
<div class="small-12 columns">
<img src="http://stage.appdataroom.com/wp-content/uploads/2014/10/pricing_ticker.png"/>
</div>
 
</div>

Screen shot 2014 10 28 at 1.57.33 pm

Hello,

I'm trying to create a pricing slider. This slider will tell you how much a product costs per month depending on the number of users. I have an image below the slider that has a scale the with number of users.

I would like to customize each range item. So that when you're over 25 users, it will say $125. I would cusotmize each one and the last one would say Call Us!

How do I accomplish this? Do I added values to the Data-Options?

I've attached an image of what it looks like now and I've pasted the code that I have in there now.

Thanks,

Ian

<div class="row">
 <div class="small-12 centered-text" style="font-size:4rem;padding-bottom:20px;">
    <span>$</span><span id="sliderOutput3"></span><span>/month</span>
  </div>
  <div class="small-12 columns">
    <div class="range-slider" data-slider data-options="start: 125; end: 1125; step: 20; display_selector: #sliderOutput3;">
      <span class="range-slider-handle" role="slider" tabindex="0"></span>
      
    </div>

  </div>
<div class="small-12 columns">
<img src="http://stage.appdataroom.com/wp-content/uploads/2014/10/pricing_ticker.png"/>
</div>
 
</div>

Screen shot 2014 10 28 at 1.57.33 pm
Voot app about 1 year ago

thank you

François Marie Arouet Voltaire 11 months ago

When such troubles are faced I usually recommend hiring a backend team that can handle this issue. After all, with enough resources, this is a sure version. Another story is to choose a firm. In our blog post you can read firebase vs parse comparison which can help you with it.