I have a simple range slider calculator, which calculates the total cost of a certain number of goods. It consider the "tariffs": the unit cost for the selected numbers of items. For example, in the range of 1-3 pieces - the cost will be 65, 5-10 pieces - 60 and so on. "Tariff" is stored in an array, in the form of objects {begin: 1, price: 10}.
HTML
<h2>How much items do you need?</h2>
<div style="margin-top: 10px;">
<span class="item-type item-type-active" id="item-1">Item 1</span>
<span class="item-type" id="item-2">Item 2</span>
<span class="item-type" id="item-3">Item 3</span>
</div>
<div style="margin-top: 50px;">
<input class="calc-range m-top-20" type="range" min="1" max="100" step="1" value="1">
</div>
Number:<div class="calc-count">1</div>
Total price: <span class="calc-total-price"></span><br>
Price per item: <span class="calc-price"></span>
Javascript
$(document).ready(function($) {
$('.item-type').click(function() {
$('.item-type').removeClass('item-type-active');
$(this).addClass('item-type-active');
});
function rangeCalc(i) {
var totalPrice = 0;
var tariff = [{begin:1, price:75}, {begin:3, price:70}, {begin:6, price:65}, {begin:11, price:60}, {begin:21, price:55}, {begin:51, price:50}];
var tariffItem2 = [{begin:1, price:85}, {begin:3, price:80}, {begin:6, price:75}, {begin:11, price:70}, {begin:21, price:65}, {begin:61, price:60}];
tariff.forEach(function(num, item) {
if (tariff[item].begin <= i) {
totalPrice = tariff[item].price;
$('.calc-total-price').text(i*totalPrice);
$('.calc-price').text(totalPrice);
};
//console.log(tariff[item].begin);
});
};
$('.calc-range').on('input', function() {
$('.calc-count').text(this.value);
rangeCalc(this.value);
});
//rangeCalc();
});
https://jsfiddle.net/8t7nnjux/2/
Now I need to consider the type of goods. For example, for item1 - one array of tariffs, for item2 - another array, and so on. The tariff should be switched when the product type is selected, with considering the number chosen for the range slider.
Use object, every element indexed by item type, then update data.
$(document).ready(function($) {
var itemtype = "item-1";
$('.item-type').click(function() {
$('.item-type').removeClass('item-type-active');
$(this).addClass('item-type-active');
itemtype = $(this).data('id');
$('.calc-count').text($('.calc-range').val());
rangeCalc($('.calc-range').val());
});
function rangeCalc(i) {
var totalPrice = 0;
var tariff = {
"item-1": [{
"begin": 1,
"price": 75
}, {
"begin": 3,
"price": 70
}, {
"begin": 6,
"price": 65
}, {
"begin": 11,
"price": 60
}, {
"begin": 21,
"price": 55
}, {
"begin": 51,
"price": 50
}],
"item-2": [{
"begin": 1,
"price": 85
}, {
"begin": 3,
"price": 80
}, {
"begin": 6,
"price": 75
}, {
"begin": 11,
"price": 70
}, {
"begin": 21,
"price": 65
}, {
"begin": 61,
"price": 60
}],
"item-3": [{
"begin": 1,
"price": 55
}, {
"begin": 3,
"price": 60
}, {
"begin": 6,
"price": 95
}, {
"begin": 11,
"price": 100
}, {
"begin": 21,
"price": 45
}, {
"begin": 61,
"price": 70
}]
};
tariff[itemtype].forEach(function(num, item) {
if (tariff[itemtype][item].begin <= i) {
totalPrice = tariff[itemtype][item].price;
$('.calc-total-price').text(i * totalPrice);
$('.calc-price').text(totalPrice);
};
//console.log(tariff[item].begin);
});
};
$('.calc-range').on('input', function() {
$('.calc-count').text(this.value);
rangeCalc(this.value);
});
//rangeCalc();
});span.item-type {
border-bottom: 1px solid blue;
color: blue;
}
span.item-type:hover {
cursor: pointer;
color: red;
border-bottom: 1px solid red;
}
span.item-type-active {
color: white;
background-color: red;
border-bottom: 0;
padding: 5px;
}
/*SLIDER RANGE*/
input[type=range] {
-webkit-appearance: none;
/*margin: 0 auto;*/
margin-bottom: 50px;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
/*border-top: 1px solid #b99400;*/
/*border-bottom: 2px solid #ffd631;*/
cursor: pointer;
/*animate: 0.2s;*/
/*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
background: #fc0;
border-radius: 25px;
/*border: 0px solid #000101;*/
transition: background 0.1s ease;
}
input[type=range]::-webkit-slider-thumb {
/*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 10px solid #fc0;
height: 50px;
width: 50px;
border-radius: 50px;
background: #fff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -19px;
transition: border 0.1s ease;
-webkit-box-shadow: 0px 11px 27px -12px rgba(145, 94, 31, 1);
-moz-box-shadow: 0px 11px 27px -12px rgba(145, 94, 31, 1);
box-shadow: 0px 11px 27px -12px rgba(145, 94, 31, 1);
}
/*input[type=range]:focus::-webkit-slider-runnable-track {
background: #ff0;
}*/
input[type=range]::-moz-range-track {
width: 100%;
height: 3px;
/*border-top: 1px solid #b99400;*/
/*border-bottom: 2px solid #ffd631;*/
cursor: pointer;
animate: 0.2s;
/*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
background: #007aff;
border-radius: 25px;
/*border: 0px solid #000101;*/
transition: background 0.1s;
}
input[type=range]::-moz-range-thumb {
/*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 3px solid #007aff;
height: 30px;
width: 30px;
border-radius: 30px;
background: #fff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
transition: border 0.1s ease;
}
input[type=range]::-ms-track {
width: 100%;
height: 3px;
/*border-top: 1px solid #b99400;*/
/*border-bottom: 2px solid #ffd631;*/
cursor: pointer;
animate: 0.2s;
/*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
background: #007aff;
border-radius: 25px;
/*border: 0px solid #000101;*/
transition: background 0.2s ease;
}
input[type=range]::-ms-fill-lower {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
/*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 3px solid #007aff;
height: 30px;
width: 30px;
border-radius: 30px;
background: #fff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
transition: border 0.1s;
}
input[type=range]:focus::-ms-fill-lower {
background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
background: #ac51b5;
}
input[type=range]:hover::-webkit-slider-runnable-track {
background: #ffd83c;
}
input[type=range]:hover::-webkit-slider-thumb {
/*background: #fff;*/
border-color: #ffd83c;
-webkit-box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
-moz-box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
}
input[type=range]:active::-webkit-slider-runnable-track {
background: #ffd83c;
}
input[type=range]:active::-webkit-slider-thumb {
/*background: #fff;*/
border-color: #ffd83c;
-webkit-box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
-moz-box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
}
input[type=range]:hover::-moz-range-track {
background: #e52e5e;
}
input[type=range]:hover::-moz-range-thumb {
background: #fff;
border-color: #e52e5e;
}
input[type=range]:active::-moz-range-track {
background: #e52e5e;
}
input[type=range]:active::-moz-range-thumb {
background: #fff;
border-color: #e52e5e;
}
/*input[type=range]:focus::-webkit-slider-thumb {
background: #fff;
transition: background 0.1s ease;
}*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>How much items do you need?</h2>
<div style="margin-top: 10px;">
<span class="item-type item-type-active" data-id="item-1">Item 1</span>
<span class="item-type" data-id="item-2">Item 2</span>
<span class="item-type" data-id="item-3">Item 3</span>
</div>
<div style="margin-top: 50px;">
<input class="calc-range m-top-20" type="range" min="1" max="100" step="1" value="1">
</div>
Number:
<div class="calc-count">1</div>
Total price: <span class="calc-total-price"></span>
<br> Price per item: <span class="calc-price"></span>