Прототип римских штор

by yoowordpress

HTML

<script src="https://cdn.rawgit.com/furf/jquery-ui-touch-punch/4bc00914/jquery.ui.touch-punch.js"></script>
<div class="calculate-block">
  <input type="hidden" id="w" value="170">
  <input type="hidden" id="h" value="120">
  <div id="slider" style="width:225px;"></div>
  <div id="slider-vertical" style="height:300px;"></div>
  <div class="rolet"></div>
</div>
<div class="block">

  <span class="wpp-calc-width">Выберите тип ткани</span>

  <select name="" id="opt">
    <option value="4750" selected>Блэкаут</option>
    <option value="4350">Лен</option>
    <option value="4650">Хлопок</option>
    <option value="4200">Тафта</option>
    <option value="4700">Атлас</option>
    <option value="8400">Жаккард</option>
    <option value="3200">Тюль</option>
    <option value="7800">Натуральный Шелк</option>
  </select>

  <div class="wpp-calc-sizes">
    <span class="wpp-calc-w"></span>
    <span class="wpp-calc-x">x</span>
    <span class="wpp-calc-h"></span>
  </div>

  <div class="rm2"></div>
  <span class="wpp-calc-width res-label">Ориентировочная стоимость</span>
  <div class="result"></div>

  <button>Вызвать Замерщика</button>

</div>
<div class="clear"></div>

CSS

body {
  background-color: #fff;
}

span.wpp-calc-width {
  display: block;
  margin-bottom: 10px;
  font-size: 21px;
  line-height: 1;
}

.wpp-calc-sizes {
  margin: 20px 0 20px 0;
  font-size: 25px;
}

span.wpp-calc-w,
span.wpp-calc-h {
  color: #3e3e3e;
}

span.wpp-calc-x {
  color: #848484;
}

.rolet {
    width: 225px;
    height: 300px;
    margin-left: 20px;
    margin-top: 25px;
    float: left;
    background-color: #fff;
    -moz-box-shadow: 1px 30px 54px -38px rgba(0, 0, 0, 0.75);
    background-color: #f5f5f5;
    box-sizing: border-box;
    background-image: url(http://dl4.joxi.net/drive/2017/06/14/0006/1021/394237/37/ec71ef36c6.png);
    background-size: 225px 300px;
    }

.res-label {
  margin-top: 30px;
}

.result {
  font-size: 50px;
  color: red;
  text-align: center;
  display: block;
  margin-bottom: 25px;
}

.patterns li {
  float: left;
  margin: 5px 5px 0 0;
  width: 34px;
  height: 34px;
  cursor: pointer;
}

.clear {
  clear: both;
}


/*.patterns li.active {
  border: 1px solid red;
}*/

.patterns img {
  width: 100%;
  height: 100%;
}

div#slider {
  margin-left: 60px;
  margin-top: 15px;
  border-radius: 0;
  border: 2px solid green;
}

.calculate-block .ui-widget-header {
  background: #4CAF50;
}

.calculate-block a.ui-slider-handle.ui-state-default.ui-corner-all {
  border-radius: 50%;
  border: 10px solid #23a919;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  margin-top: -4px;
  margin-left: -3px;
  outline: none;
  cursor: pointer;
  background: #8BC34A;
  box-shadow: 0 0 0px 2px green;
}

div#slider-vertical {
  margin-top: 25px;
  float: left;
  margin-left: 25px;
  border-radius: 0;
  border: 2px solid green;
}

ul.patterns {
  margin-left: 60px;
  margin-top: 20px;
}

.block {
  float: left;
  margin-left: 25px;
  margin-top: -18px;
  text-align: center;
}

.ui-slider-vertical.ui-slider-rtl .ui-slider-range-min {
  top: 0;
  bottom: auto;
}

.ui-slider-vertical.ui-slider-rtl .ui-slider-range-max {
  top: auto;
 ...

JavaScript

/*
 * jQuery UI Slider 1.8.9.rtl.1
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider
 *
 * Depends:
 *	jquery.ui.core.js
 *	jquery.ui.mouse.js
 *	jquery.ui.widget.js
 */
(function($, undefined) {

  // number of pages in a slider
  // (how many times can you page up/down to go through the whole range)
  var numPages = 5;

  $.widget("ui.slider", $.ui.mouse, {

    widgetEventPrefix: "slide",

    options: {
      animate: false,
      distance: 0,
      max: 100,
      min: 0,
      orientation: "horizontal",
      isRTL: false, // RTL
      range: false,
      step: 1,
      value: 0,
      values: null
    },

    _create: function() {
      var self = this,
        o = this.options;

      this._keySliding = false;
      this._mouseSliding = false;
      this._animateOff = true;
      this._handleIndex = null;
      this._detectOrientation();
      this._mouseInit();

      this.element
        .addClass("ui-slider" +
          " ui-slider-" + this.orientation +
          (o.isRTL ? " ui-slider-rtl" : "") + // RTL
          " ui-widget" +
          " ui-widget-content" +
          " ui-corner-all");

      if (o.disabled) {
        this.element.addClass("ui-slider-disabled ui-disabled");
      }

      this.range = $([]);

      if (o.range) {
        if (o.range === true) {
          this.range = $("<div></div>");
          if (!o.values) {
            o.values = [this._valueMin(), this._valueMin()];
          }
          if (o.values.length && o.values.length !== 2) {
            o.values = [o.values[0], o.values[0]];
          }
        } else {
          this.range = $("<div></div>");
        }

        this.range
          .appendTo(this.element)
          .addClass("ui-slider-range");

        if (o.range === "min" || o.range === "max") {
          this.range.addClass("ui-slider-range-" + o.range);
        }

       ...