Windows Calc

by Evgenii Malikov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="calc" ng-app>
    <div class="form-group">
        <label>Выберите тип окна</label>
        <select class="form-control">
            <option>Круглые</option>
            <option>Квадратные</option>
            <option>Треугольные</option>
            <option>Трапециевидные</option>
        </select>
        <div class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox">Металлический профиль</label>
            </div>
            <div class="form-group">
                <label>Высота</label>
                <input type="number" class="form-control" name="height" ng-model="height">
            </div>
            <div class="form-group">
                <label>Ширина</label>
                <input type="number" class="form-control" name="width" ng-model="width" min="10" max="100">
            </div>
            <div class="form-group">
                <input type="range" ng-model="height" min="10" max="100" value="30">
            </div>
            <div class="form-group">
                <input type="range" ng-model="width" min="10" max="100" value="30">
            </div>
        </div>

CSS

div.calc {
    margin: 50px
}
input[type=range][orient=vertical] {
    writing-mode: bt-lr;
    /* IE */
    -webkit-appearance: slider-vertical;
    /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}