Как создать калькулятор range?

Question

EgoryKH @EgoryKH

JavaScript

Как создать калькулятор range?

Как сделать чтобы при перетаскивании range менялось значение?

Все выводится через console.log

$('.slider').slick({
    fade: true,
    nextArrow: $('.arrows_next'),
    prevArrow: $('.arrows_prev'),
});

var allPreviews = $('.preview');
var allColors = $('.color_selection > li');

function changePreviewWidth(width){
    $('.main').css({
        "width": width
    });
}

function changePreviewColor(color){
    $('.main').css({
        "background": color
    });
}

$('.preview').on('click', function(){
    allPreviews.removeClass('active');
    $(this).toggleClass('active');
});

$('.color_selection li').on('click', function(){
    allColors.removeClass('active');
    $(this).toggleClass('active');
});

// Range
$('#slider4').range2DSlider({
    onlyGridPoint:true,
    round: true,
    grid:false,
    gridStep: [1, 0],
    height:0,
    className:'xdsoft_custom',
    showLegend:[1,0],
    axis:[[0,5]],
    tooltip:['top'],
    alwShowTooltip:[true],
    allowAxisMove:['x'],
    printLabel:function( val ){
        return val[0].toFixed(0);
    }
}).range2DSlider('value',[[0.05,0]]);

$('#slider5').range2DSlider({
    grid:false,
    gridStep: [1, 0],
    height:0,
    className:'xdsoft_custom',
    showLegend:[1,0],
    axis:[[0,7]],
    tooltip:['top'],
    alwShowTooltip:[true],
    allowAxisMove:['x'],
    printLabel:function( val ){
        return val[0].toFixed(0);
    }
}).range2DSlider('value',[[0.05,0]]);

// Calculator Handler
var
    totalPrice         = 1,
    colorPrice         = 15,
    planLargePrice     = 250,
    planMiddlePrice    = 100,
    planSmallPrice     = 75,
    sofaSingularPrice  = 200,
    chairSingularPrice = 50,

    colorEl            = $('.color_selection li'),
    planLargeEl        = $('.preview1'),
    planMiddleEl       = $('.preview2'),
    planSmallEl        = $('.preview3'),
    sofaQuantityEl     = $('#slider4'),
    chairQuantityEl    = $('#slider5');

$('#slider4').on('change', function(){
    var
        sofa = sofaQuantityEl.val(),
        sofaTotal = 1;

    switch (sofa) {
        case 1: 
            sofaTotal = 1;
            sofaTotal *= 1; 
            break;
        case 2:
            sofaTotal = 1;
            sofaTotal *= 2;
            break;
        case 3:
            sofaTotal = 1;
            sofaTotal *= 3;
            break;
        case 4:
            sofaTotal = 1;
            sofaTotal *= 4;
            break;
        case 5: 
            sofaTotal = 1;
            sofaTotal *= 5;
            break;
        default:
            sofaTotal *= 1;
            break;
    }


    totalPrice += sofaTotal * sofaSingularPrice;

    console.log(totalPrice - 1);
});

$('#slider5').on('change', function(){
    var chair = chairQuantityEl.val();
});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" >
	<title>FF</title>
	<script src="https://kit.fontawesome.com/d8906e0556.js" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="css/slick.css">
	<link rel="stylesheet" href="css/jquery.range2dslider.css">
	<link rel="stylesheet" href="css/main.min.css" >
</head>
<body>
	<header class="hero">
		<div class="container">
			<div class="heading d-flex">
				<a href="#" class="logo"><img src="img/logo.png" alt="Home logo"></a>
				<nav>
					<ul class="menu d-flex">
						<li><a href="#">Showcase</a></li>
						<li><a href="#">Cart</a></li>
						<li><a href="#">Contacts</a></li>
					</ul>
				</nav>
			</div>
			<div class="slider">
				<div class="slide">
					<span class="number">1</span>
					<div class="slide__content d-flex">
						<div class="offer">
							<span class="offer__tag">Brand new</span>
							<h1 class="offer__title">Extraordinary sofa design</h1>
							<span class="offer__price">€ 496</span>
							<a href="#" class="offer__btn">Add to Cart</a>
						</div>
						<img src="img/main-product.png" alt="Product #1" class="slide__thumbnail">
					</div>
					<div class="slider_arrows">
						<span class="arrows_prev">←</span>
						<span class="arrows_next">→</span>
					</div>
				</div>
				<div class="slide">
					<span class="number">2</span>
					<div class="slide__content d-flex">
						<div class="offer">
							<span class="offer__tag">Brand new</span>
							<h1 class="offer__title">Сomfortable sofas</h1>
							<span class="offer__price">€ 522</span>
							<a href="#" class="offer__btn">Add to Cart</a>
						</div>
						<img src="img/sofa.png" alt="Product #2" class="slide__thumbnail">
					</div>
					<div class="slider_arrows">
						<span class="arrows_prev">←</span>
						<span class="arrows_next">→</span>
					</div>
				</div>
			</div>
		</div>
	</header>
	<section class="showcase">
		<div class="container">
			<div class="d-flex titles_row">
				<h2 class="section_titles">
					Showcase
				</h2>	
				<ul class="tabs_navi d-flex">
					<li class="active">Latest</li>
					<li>Hot</li>
					<li> New</li>
				</ul>
				<div class="tabs_appearance d-flex">
					<i class="fas fa-th-large"></i>
					<i class="fas fa-equals"></i>
				</div>
			</div>
			<div class="showcases d-grid">
				<div class="showcases__card">
					<img src="img/showcase1.jpg" alt="Sofa #1" class="card__thumbnail">
					<div class="card__caption">
						<h3 class="caption__title">Beautiful sofa new one</h3>
						<span class="caption__price">€ 368</span>
						<a href="#" class="caption__btn">Add to cart</a>	
					</div>
				</div>
				<div class="showcases__card">
					<img src="img/showcase2.jpg" alt="Sofa #1" class="card__thumbnail">
					<div class="card__caption">
						<h3 class="caption__title">Beautiful sofa new one</h3>
						<span class="caption__price">€ 368</span>
						<a href="#" class="caption__btn">Add to cart</a>	
					</div>
				</div>
				<div class="showcases__card">
					<img src="img/showcase3.jpg" alt="Sofa #1" class="card__thumbnail">
					<div class="card__caption">
						<h3 class="caption__title">Beautiful sofa new one</h3>
						<span class="caption__price">€ 368</span>
						<a href="#" class="caption__btn">Add to cart</a>	
	
					</div>
				</div>
				<div class="showcases__card">
					<img src="img/showcase4.jpg" alt="Sofa #1" class="card__thumbnail">
					<div class="card__caption">
						<h3 class="caption__title">Beautiful sofa new one</h3>
						<span class="caption__price">€ 368</span>
						<a href="#" class="caption__btn">Add to cart</a>	
					</div>
				</div>
				<div class="showcases__card">
					<img src="img/showcase5.jpg" alt="Sofa #1" class="card__thumbnail">
					<div class="card__caption">
						<h3 class="caption__title">Beautiful sofa new one</h3>
						<span class="caption__price">€ 368</span>
						<a href="#" class="caption__btn">Add to cart</a>	
					</div>
				</div>
				<div class="showcases__card">
					<img src="img/showcase6.jpg" alt="Sofa #1" class="card__thumbnail">
					<div class="card__caption">
						<h3 class="caption__title">Beautiful sofa new one</h3>
						<span class="caption__price">€ 368</span>
						<a href="#" class="caption__btn">Add to cart</a>	
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="create">
		<div class="container">
			<div class="bg-images">
				<div class="img1">
					<img src="img/img1.jpg" alt="sofa">
				</div>
				<div class="img2">
					<img src="img/img3.jpg" alt="sofa">
				</div>
			</div>
			<div class="section-text">
				<h2 class="section-title">Creating new spaces</h2>
				<p class="section-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
				<button class="text__btn"><span class="question-sign">?</span> Quis nostrud exercitation ullamco...</button>
			</div>
			<div class="bg-images bg-images2">
				<div class="img3">
					<img src="img/img2.jpg" alt="furniture">
				</div>	
			</div>
		</div>
	</section>
	<section class="plan">
		<div class="container">
			<h2 class="section-title">Choose your plan</h2>
			<div class="settings_box d-grid">
				<div class="view">
					<h3 class="view__title">
						Plan of your room
					</h3>
					<div class="previews d-flex">
						<div onclick="changePreviewWidth('100%')" class="preview preview1"></div>
						<div onclick="changePreviewWidth('70%')" class="preview preview2"></div>	
						<div onclick="changePreviewWidth('40%')" class="preview preview3 active"></div>
					</div>
					<div class="main"></div>
				</div>
				<div class="tools">
					<div class="tools__color">
						<h3 class="tools__title">Color of the walls</h3>
						<ul class="color_selection d-flex">
							<li class="turquoise" onclick="changePreviewColor('#7fdada')"></li>
							<li class="violet" onclick="changePreviewColor('#da7fd7')"></li>
							<li class="green active" onclick="changePreviewColor('#7fda86')"></li>
							<li class="red" onclick="changePreviewColor('#da7f7f')"></li>
						</ul>
					</div>
					<div class="quantity">
						<div class="sofas_quantity">
							<h3 class="quantity__title">Quantity of sofas</h3>
							<input id="slider4">
						</div>
						<div class="chairs_quantity">
							<h3 class="quantity__title">Quantity of chairs</h3>
							<input id="slider5">
						</div>
					</div>
					<div class="totals">
						Total: <span class="total_sum">€ 1468</span>
						<button class="order_btn">
							Procced to order
						</button>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script src="js/jquery.range2dslider.js"></script>
	<script src="js/slick.min.js"></script>
	<script src="js/main.min.js"></script>
</body>
</html>