JSFiddle - React, Tailwind, and code Playground

by Chris Ames

HTML

<h1>Price Calculator</h1>

<form>

<!-- Fieldset 1: Choose number seats-->
<fieldset>
<div class="range-slider">
  <h3>How many seats do you need?</h3>
  <hr/>
  <input name="range--seats" id="range--seats" class="range-slider__range" type="range" value="0" min="0" max="10">
  <span class="range-slider__value">0</span>
  <output for="range--seats" class="output--seats"></output>
</div>
</fieldset>
  
<!-- Fieldset 2: Add Ultra Performance --> 
<fieldset>
  
<h3>Would you like to add Ultra Performance?</h3>
 
<label><input id="rdb1" type="radio" name="toggler" value="1" />Subscription</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Buy once</label>
<label><input id="rdb3" type="radio" name="toggler" value="3" />No thanks</label>

<!-- slider 1 -->
<div id="blk-1" class="range-slider toHide" style="display:none">
  <hr/>
  <h4>How many subscriptions do you need?</h4>
  <input name="range--subs" id="range--subs" class="range-slider__range" type="range" value="1" min="1" max="10">
  <span class="range-slider__value">1</span>
  <output for="range--subs" class="output--subs"></output>
</div>
  
<!-- slider 2 -->  
<div  id="blk-2" class="range-slider toHide" style="display:none">
  <hr/>
  <h4>How many 'Buy Once' do you need?</h4>
  <input name="range--buy-once" id="range--buy-once" class="range-slider__range" type="range" value="1" min="1" max="10">
  <span class="range-slider__value">1</span>
  <output for="range--buy-once" class="output--buy-once"></output>
</div>
  
</fieldset>

</form>

CSS

// Base Colors
$shade-10: #2c3e50 !default;
$shade-1: #d7dcdf !default;
$shade-0: #fff !default;
$teal: #1abc9c !default;


// Reset
* {
  &,
  &:before,
  &:after {
    box-sizing: border-box;
  }
}

body {
  font-family: sans-serif;
  padding: 60px 20px;
  
  @media (min-width: 600px) {
    padding: 60px;
  }
}

fieldset {
  border:none;
  background:#efefef;
  padding:2em;
  margin:0 0 1em 0;
  border-radius:0.25em;
}
hr {
  border:none;
  margin:0 0 2em 0;
}
.range-slider {
  margin: 0 0 0 0;
}

output {
  text-align:center;
  margin:0 auto;
  font-size:2em;
  display:inline-block;
  width:auto;
  margin:0.5em 0 0 0;
}

// Range Slider
$range-width: 100% !default;

$range-handle-color: $shade-10 !default;
$range-handle-color-hover: $teal !default;
$range-handle-size: 20px !default;

$range-track-color: $shade-1 !default;
$range-track-height: 10px !default;

$range-label-color: $shade-10 !default;
$range-label-width: 60px !default;

.range-slider {
  width: $range-width;
}

.range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (#{$range-label-width + 13px}));
  height: $range-track-height;
  border-radius: 5px;
  background: $range-track-color;
  outline: none;
  padding: 0;
  margin: 0;

  // Range Handle
  &::-webkit-slider-thumb {
    appearance: none;
    width: $range-handle-size;
    height: $range-handle-size;
    border-radius: 50%;
    background: $range-handle-color;
    cursor: pointer;
    transition: background .15s ease-in-out;

    &:hover {
      background: $range-handle-color-hover;
    }
  }

  &:active::-webkit-slider-thumb {
    background: $range-handle-color-hover;
  }

  &::-moz-range-thumb {
    width: $range-handle-size;
    height: $range-handle-size;
    border: 0;
    border-radius: 50%;
    background: $range-handle-color;
    cursor: pointer;
    transition: background .15s ease-in-out;

    &:hover {
      background: $range-handle-color-hover;
    }
  }

  &:active::-moz-range-thumb {
    background:...

JavaScript

var rangeSlider = function(){
  var slider = $('.range-slider'),
      range = $('.range-slider__range'),
      value = $('.range-slider__value');
    
  slider.each(function(){

    value.each(function(){
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function(){
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();

//toggle sliders in fieldset 2
$(function() {
    $("[name=toggler]").click(function(){
      
            $('.toHide').hide();
            $("#blk-"+$(this).val()).show('slow');
      
      if ((this).val(3)){ //If No thanks
        $('.toHide').hide();
      } //else show options

      
    });
 });

//Calculate cost of seats
//var costOfSeats;
//costOfSeats == costOfSeats * 995;

var n = $('#range--seats').val(this.value); //number of seats
var sum = 0;
var extraSeat = 995;
var seat = 2250;

//Display cost of seats

  $('#range--seats').on("change", function() {
    
    //$('.output--seats').val("£" + this.value +",000" );

    if (n != 0) {
       sum = seat + ((n-1) * extraSeat);
       $('.output--seats').val("£" + sum);
    }

  }).trigger("change");

//Previous attempt

    /*if ($(this).val(this.value != 0)) {
      //costOfSeats = 0;
    } else if ($(this).val(this.value = 1)) {
      costOfSeats = 2250;
    } else {
      //costOfSeats = costOfSeats + ($(this).val(this.value * 995));
    }*/
 
    //$('.output--seats').val("£" + this.value +",000" );
    
  


//Display cost of subscription
$('#range--subs').on("change", function() {
    $('.output--subs').val("£" + this.value +",000" );
    }).trigger("change");

//Display cost of 'buy once'
$('#range--buy-once').on("change", function() {
    $('.output--buy-once').val("£" + this.value +",000" );
    }).trigger("change");