senaduka/old-web
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Merge branch 'range-slider' into 'master'

Browse Source 
Range slider

See merge request saburly/marketalarm/web!16
This commit was merged in pull request #16.
This commit is contained in:
Nedim Uka
2019-06-12 11:37:15 +00:00
parent 8bb0908c45 5d6e7f3938
commit 371eac900e
3 changed files with 35 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/public/main.css
View File

@@ -9,6 +9,9 @@
background-repeat: no-repeat;
color: rgba(0, 0, 0, 0);
}
.no-ui-slider {
width: 95%
}
#map {

5
app/views/layout.ejs
View File

@@ -3,6 +3,7 @@
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="UTF-8" />
@@ -13,5 +14,9 @@
<%-body%>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
</body>
</html>

78
app/views/partials/range.ejs
View File

@@ -1,77 +1,53 @@
<form method="POST" id="form-range">
<div>
<div class="row center-align">
<h6>Od</h6>
</div>
<div class="row center-align">
<h6 id="from-value"><%= rangeFrom.value %> <%= unit %> </h12>
</div>
<p class="range-field">
<input name="from" id="from" type="range" value="<%= rangeFrom.value %>" min="<%= rangeFrom.min %>"
max="<%= rangeFrom.max %>" step="<%= rangeFrom.step %>" />
</p>
<div class="row center-align">
<h6>Do</h6>
</div>
<div class="row center-align">
<h6 id="to-value"><%= rangeTo.value %> <%= unit %></h12>
</div>
<p class="range-field">
<input name="to" id="to" type="range" value="<%= rangeTo.value %>" min="<%= rangeTo.min %>"
max="<%= rangeTo.max %>" step="<%= rangeTo.step %>" />
</p>
</div>
<div class="row center-align no-ui-slider" id="slider"></div>
<div class="col s6 push-s3">
<a id="btnsubmit" href="#" class="welcome-center-button waves-effect waves-light btn">
Dalje
</a>
</div>
<input type="hidden" name="from" id="from" />
<input type="hidden" name="to" id="to" />
</form>
<script>
$(document).ready(() => {
$("#from").change(function () {
if (Number($("#from").val()) >= Number($("#to").val())) {
$("#from").val(Number($("#to").val()) - Number(<%= rangeFrom.step %>) )
$("#from").next().css({"height": "0px"});
} else {
$("#from").next().css({"height": "30px"});
}
var slider = document.getElementById('slider');
$('#from-value').text($("#from").val() + "<%= unit %>");
});
const unitFormat = wNumb({
decimals: 3,
thousand: '.',
suffix: '<%= unit %>'
})
$("#to").change(function () {
if (Number($("#to").val()) <= Number($("#from").val())) {
$("#to").val(Number($("#from").val()) + Number(<%= rangeTo.step %>) )
$("#to").next().css({"height": "0px"});
} else {
$("#to").next().css({"height": "30px"});
}
$('#to-value').text($("#to").val() + "<%= unit %>");
noUiSlider.create(slider, {
start: [<%= rangeFrom.value %>, <%= rangeTo.value %>],
connect: true,
tooltips: true,
step: <%= rangeFrom.step %>,
range: {
'min': <%= rangeFrom.min %>,
'max': <%= rangeTo.max %>
},
format: unitFormat
});
$("#btnsubmit").click(() => {
var from = $("#from").val();
var to = $("#to").val();
$("#foo").on("click", function () {
alert($(this).text());
});
if (parseInt(from, 10) >= parseInt(to, 10)) {
alert("\"Od\" vrijednost ne smije biti veca od \"Do\" vrijednosti ")
return;
}
const sliderValues = slider.noUiSlider.get();
$("#from").val(unitFormat.from(sliderValues[0]));
$("#to").val(unitFormat.from(sliderValues[1]));
$("#form-range").submit();
});
// });
});
});
</script>