Форум

fos · #21 (**permalink**) 26.04.2016, 23:25

Сообщение от рони

fos,
за чёрточками лучше сюда ... http://ionden.com/a/plugins/ion.rangeSlider/

фигасе.. эт я так понимаю надстройка к слайдеру (адд-он)?
Т.е. можно подключить сию хреновину и заменив

$("#slider").slider({

на

$("#slider").ionRangeSlider({

можно настаивать визуализацию, добавляя расширенный функционал к запуску, не перекарячивая остальной код скрипта???

рони · #22 (**permalink**) 26.04.2016, 23:34

fos,
не понял ... по моему так код нужно новый писать.

fos · #23 (**permalink**) 26.04.2016, 23:37

Сообщение от рони

fos,
не понял ... по моему так код нужно новый писать.

((

т.е. обернуть этот код в красивую оболочку ionrange-слайдера не получится и придется все вновь вообще делать, используя другие функции и переменные?

рони · #24 (**permalink**) 26.04.2016, 23:40

fos,
да

рони · #25 (**permalink**) 26.04.2016, 23:46

fos,
для информации ещё со шкалой слайдер
http://egorkhmelev.github.io/jslider/ тоже свои параметры

fos · #26 (**permalink**) 26.04.2016, 23:46

Сообщение от рони

fos,
да

=\ попробую ручками тогда визуализовать то, что уже точно работает

Спасибо, Рони - Вы настоящий профессор

рони · #27 (**permalink**) 27.04.2016, 02:02

Сообщение от fos

А отображать на позунке деления можно? не обязательно циферные значения, хотябы тупо черточки

мысли вслух ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}

#amount, #amount2, #amount3 {
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;

}
#slider{    background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
    background-image:-o-linear-gradient(left,#FFD700,#FF4500);
    background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
    background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
    background-image:linear-gradient(to right,#FFD700,#FF4500);
  margin-bottom: 40px;
   height: 6px;
   width: 300px;
}
 #slider2{
     background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
    background-image:-o-linear-gradient(left,#FFD700,#FF4500);
    background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
    background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
    background-image:linear-gradient(to right,#FFD700,#FF4500);
    height: 300px;
    width: 6px;
}


 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
  <script>
$(function() {
var price = {
    30: {
        30: 905,
        40: 1095
    },
    40: {
        30: 1095,
        40: 1305,
        60: 1730
    },
   50: {
        50: 1755,
        70: 2230
   },
   60: {
        40: 1730,
        60: 2255,
        90: 3045
    },
   70: {
        50: 2230,
        70: 3000,
        100: 3670
    },
   80: {
        80: 3500,
        120: 4655
    },
   90: {
        60: 3045,
        90: 4200
    },
   100: {
        70: 3670,
        100: 4755
    },
   120: {
        80: 4655,
        120: 6305
    }
};

    function comb(a) {
        return Object.keys(a)
    }

    var steps = comb(price);
    var num = steps[0];
    var steps2 = comb(price[num]);

    $("#slider2").slider({  orientation: "vertical",
        value: 0,
        min: 0,
        max: steps2.length - 1,
        step: 1,
        slide: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            $("#amount3").val(price[num][Y]);
        },
        change: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            $("#amount3").val(price[num][Y]);
        }
    });
    $("#slider").slider({
        value: 0,
        min: 0,
        max: steps.length - 1,
        step: 1,
        slide: function(event, ui) {
            num = steps[ui.value];
            $("#amount").val(num);
            steps2 = comb(price[num]);
            $("#slider2").slider("option","max", steps2.length - 1);
            $("#slider2").slider("option", "value", 0);
            scale(steps2, "#slider2")
        },
        change: function(event, ui) {
            num = steps[ui.value];
            $("#amount").val(num);
            steps2 = comb(price[num]);
            $("#slider2").slider("option","max", steps2.length - 1);
            $("#slider2").slider("option", "value", 0);
            scale(steps2, "#slider2")
        }
    });
    $("#slider").slider("option", "value", 0) ;
    function scale(arr, elem, width)
    {
    $(".cm", elem).remove();
    var w = 100/(arr.length-1)||100;
    !width && (arr = arr.slice().reverse());
    $.each(arr, function(i, num){
    var css = width ? {left : w * i+"%", width : w} : {top : w * i+"%", height : w};
    $("<div>",{"class" : "cm", "rel" : num, "css" : css}).appendTo(elem);
          });
    }
    scale(steps, "#slider", true)



});
  </script>
<style type="text/css">
#slider .cm {
 margin: 10px auto;
 position: absolute;
 border-left: 1px solid #555;
 height: 14px;
}
#slider .cm:after {
 position: absolute;
 bottom: -15px;
 font: 11px/1 sans-serif;
}
#slider2 .cm {
 margin:  auto 10px;
 position: absolute;
 border-top: 1px solid #555;
 width: 14px;
}
#slider2 .cm:after {
 position: absolute;
 right: -15px;
 font: 11px/1 sans-serif;
}


.cm:after {
 content:  attr(rel);
}
.ui-slider-handle{border-radius:50%; font-size: 12px;}
.ui-slider-horizontal .ui-slider-handle {
    top: -0.5em;
}
.ui-slider-vertical  .ui-slider-handle {
    left: -0.5em;
}
:focus{
    outline:0;
    border:0;
  }

</style>
</head>

<body>
    <p>
  <input type="text" id="amount" readonly>
</p>

<div id="slider"></div>

<p>
  <input type="text" id="amount2" readonly>
</p>

<div id="slider2"></div>
<p>
  <input type="text" id="amount3" readonly>
</p>
</body>
</html>

fos · #28 (**permalink**) 27.04.2016, 09:45

Сообщение от рони

мысли вслух ...

я в шоке... Спасибо!

fos · #29 (**permalink**) 27.04.2016, 14:39

Все круто работает, профессор крутой!

Теперь добрался до следующей стадии, когда мои клешни за час 11 раз сломали работоспособность кода...

залил на гитхаб текущую стадию опытного образца - там div с id="olol" как его заставить менять свой width\height согласно значениям в инпутах #amount (ширина) и #amount2 (высота) помноженное на 3?

т.е. если ползунок 1 в шкале 50, а ползунок 2 в шкале 70, то ширина #olol = 150px , а высота 210px

Я вот сейчас вчитался, что написал и понял, что снова объяснил туго...
Нашел тут тему, где говорят использовать "style.width|height" и по гетэлементайди привинчивать, но алгаритмики в моем мозгу пока не хватает, чтобы понять куда именно, чтобы код не поломать :\

рони · #30 (**permalink**) 27.04.2016, 15:44

Сообщение от fos

там div с id="olol"

где?

Форум

Справочник

Discord чат

Курсы javascript