<div class="input-holder">
    <div class="property-wrapper">
        <label class="input-wrap">
            <input type="range" min="0" max="200" step="1" value="130" data-input="leftBorderW" class="property-inputs">
            <span>border-left</span>
        </label>
        <label class="input-wrap">
            <input type="range" min="0" max="200" step="1" value="0" data-input="rightBorderW" class="property-inputs">
            <span>border-right</span>
        </label>
        <label class="input-wrap">
            <input type="range" min="0" max="250" step="1" value="130" data-input="bottomBorderW" class="property-inputs">
            <span>border-bottom</span>
        </label>
        <label class="input-wrap">
            <input type="range" min="0" max="500" step="1" value="0" data-input="width" class="property-inputs">
            <span>width</span>
        </label>
    
        <label class="input-wrap">
            <input type="range" min="0" max="360" step="15" value="0" data-input="rotate" class="property-inputs">
            <span>transform: rotate</span>
        </label>
    </div>

    <textarea cols="50" rows="6" class="output-ta js-property-output" readonly></textarea>
</div>


<div class="triangle-holder"><div class="js-boder-element"></div></div>

@import url(https://fonts.googleapis.com/css?family=Poppins);

* {
  font-family: "Poppins";
}

.property-wrapper {
  display: flex;
}

.input-holder {
  margin-bottom: 30px;
}

.input-wrap {
  position: relative;
  width: 20%;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;

  span {
    pointer-events: none;
    width: 100%;
    display: block;
  }

  input {
    width: 100%;
  }

  padding: 10px;
}

.output-ta {
  display: block;
  resize: none;
  padding: 10px 22px;
  border: 2px solid #333;
  border-radius: 25px;
  color: #656565;
  margin: 0 auto;
  overflow: hidden;
  max-width: 100%;
  &:focus {
    outline: none;
  }
}

.triangle-holder {
  display: flex;
  justify-content: center;
}

(function () {

    let boderElement = $('.js-boder-element'),
        inputs = $('[data-input]'),
        output = $('.js-property-output'),
        settings = {};

    inputs.each(function () {
        let prop = $(this).attr('data-input');
        settings[prop] = $(this).val();

        this.addEventListener('input', function (e) {
            let prop = $(this).attr('data-input');
            settings[prop] = e.target.value;
            setParameters();
        });
    });

    setParameters();

    function setParameters(params) {

        boderElement.css({
            'width': settings.width + 'px',
            'border-left': settings.leftBorderW + 'px solid transparent',
            'border-right': settings.rightBorderW + 'px solid transparent',
            'border-bottom': settings.bottomBorderW + 'px solid #f9cb30',
            'transform': 'rotate(' + settings.rotate + 'deg)',
        });

        output.text(
            'width: ' + settings.width + 'px;\n' +
            'border-left: ' + settings.leftBorderW + 'px solid transparent;\n' +
            'border-right: ' + settings.rightBorderW + 'px solid transparent;\n' +
            'border-bottom: ' + settings.bottomBorderW + 'px solid #f9cb30;\n' +
            'transform: ' + 'rotate(' + settings.rotate + 'deg);');
    }

})();