Here is the entire test code.
In the end I will have numerous sliders and input fields with different IDs (no pattern) so I want to use $this or pass vars rather than having a bunch of repeated code.
There will be 3 max-values of the sliders: 5, 10, 15
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script>
$(function() {
$( "#slider1" ).slider({
value:0, min: 0, max: 5, step: 1,
slide: function( event, ui ) {
$( "#amount1" ).val( ui.value );
}
});
$( "#amount1" ).val( $( "#slider1" ).slider( "value" ) );
$( "#slider2" ).slider({
value:0, min: 0, max: 10, step: 1,
slide: function( event, ui ) {
$( "#amount2" ).val( ui.value );
}
});
$( "#amount2" ).val( $( "#slider2" ).slider( "value" ) );
$( "#slider3" ).slider({
value:0, min: 0, max: 15, step: 1,
slide: function( event, ui ) {
$( "#amount3" ).val( ui.value );
}
});
$( "#amount3" ).val( $( "#slider3" ).slider( "value" ) );
});
</script>
<style>
.steps {
border: 1px solid transparent;
position: relative;
height: 30px;
}
.tick {
border: 1px solid transparent;
position: absolute;
width: 1.2em;
margin-left: -.6em;
text-align:center;
left: 0;
}
.ui-slider .ui-slider-handle {
width: 2em;
height: 3em;
top: -1.4em;
margin-left: -1em;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 2px solid #d3d3d3;
background: #333;
}
</style>
</head>
<body style="font-size: small;">
<div style="display:block;margin:100px auto;padding:0 8%">
<input type="text" id="amount1" style="border:0 none">
<div id="slider1"></div>
<div class="steps">
<?php
for ($i=0, $t=5; $i<=$t; $i++) {
echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
echo '">|<br>'.$i.'</span>';
}
?>
</div>
</div>
<div style="display:block;margin:100px auto;padding:0 8%">
<input type="text" id="amount2" style="border:0 none">
<div id="slider2"></div>
<div class="steps">
<?php
for ($i=0, $t=10; $i<=$t; $i++) {
echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
echo '">|<br>'.$i.'</span>';
}
?>
</div>
</div>
<div style="display:block;margin:100px auto;padding:0 8%">
<input type="text" id="amount3" style="border:0 none">
<div id="slider3"></div>
<div class="steps">
<?php
for ($i=0, $t=15; $i<=$t ; $i++) {
echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
echo '">|<br>'.$i.'</span>';
}
?>
</div>
</div>
</body>
</html>
You should give your sliders data attributes to hold slider values, min and max values, etc., and a distinct class and then init slider on them. An example would be:
<div style="display:block;margin:100px auto;padding:0 8%">
<input type="text" id="amount3" style="border:0 none" class="slider_value">
<div id="slider3" class="slider_container" data-value="0" data-min="0" data-max="15" data-steps="1"></div>
<div class="steps">
<?php
for ($i=0, $t=15; $i<=$t ; $i++) {
echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
echo '">|<br>'.$i.'</span>';
}
?>
</div>
</div>
And then:
$(function(){
var value, step, min, max, input;
$('.slider_container').each(function(){
input = $(this).prev('.slider_value');
value = $(this).data('value');
step = $(this).data('steps');
min = $(this).data('min');
max = $(this).data('max');
$(this).slider({
value: value,
min: min,
max: max,
step: step,
slide: function(event, ui) {
$(this).prev('.slider_value').val(ui.value);
}
});
input.val($(this).slider("value"));
});
});
I think a loop would reduce duplicate code:
var numElements = 3;
for (var i = 0; i < numElements; i++) {
var $slider = $('#slider'+i);
var $amount = $('#amount'+i);
$slider.slider({
value:0, min: 0, max: 5, step: 1,
slide: function( event, ui ) {
$amount.val( ui.value );
}
});
$amount.val( $slider.slider( "value" ) );
}
Related
I'm writting the doors calculate now. This calculate have got two parts - doorway and door. And I don't know how count up this dimensions. I've got table with dimensions doorway and door. My height does not change for door. This I realized. But with width I have got problems. What should be the formula for such values of width? I have got an idea: I write an array with objects with values height\width. But what to do next I don't know. Thank you!
$(document).ready(function() {
var $total = $(".total");
var $total1 = $(".total1");
var $tot = $(".tot");
var $tot1 = $(".tot1");
var mySlider = $( "#mySlider" ).slider({
range: "min",
min: 650,
step: 50,
max: 1000,
value: 1000,
slide: function( event, ui ) {
mySlider1.slider( "option", "value", ui.value + 50 );
$total.val( ui.value );
},
change: function(event, ui){
$total.val( ui.value );
}
});
$total.val( mySlider.slider( "value" ) );
// $total.on("keyup",function(e){
// $("#mySlider").slider("value",this.value);
// });
var mySlider1 = $( "#mySlider1" ).slider({
range: "min",
disabled: true,
min: 600,
step: 100,
max: 900,
value: 900,
slide: function( event, ui ) {
mySlider.slider( "option", "value", ui.value - 100);
$total1.val( ui.value );
},
change: function(event, ui){
$total1.val( ui.value );
}
});
$total1.val( mySlider1.slider( "value" ) );
var rangeSlider = $( "#rangeSlider" ).slider({
orientation: "vertical",
range: "min",
min: 2040,
max: 2080,
value: 3000,
slide: function( event, ui ) {
$tot.val( ui.value );
rangeSlider1.slider("option","value", ui.value);
},
change: function(event, ui){
$tot.val( ui.value );
}
});
$tot.val( rangeSlider.slider( "value" ) );
var rangeSlider1 = $( "#rangeSlider1" ).slider({
orientation: "vertical",
disabled: true,
range: "min",
min: 0,
max: 2000,
value: 2000,
slide: function( event, ui ) {
$tot1.val( ui.value );
rangeSlider.slider("option","value", ui.value);
},
change: function(event, ui){
$tot1.val( ui.value );
}
});
$tot1.val( rangeSlider1.slider( "value" ) );
// var sliderOptions = [
// { minWidth: 650 },
// { maxWidth: 1000 },
// { minHeight: 2040 },
// { maxHeight: 2080 },
// { doorHeight: 2000 },
// { doorMaxWidth: 900 },
// { doorMinWidth: 600 }
// ];
// function () {
// }
});
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI : Slider with Minimum Range </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<!-- Doorway -->
<div class="before" style="display: inline-block; margin-right: 20px;">
<p>
<label for="tot"> Height:</label>
<input type="text" id="tot" class="tot" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="rangeSlider" style="height:250px; display: inline-block;"></div>
<div style="display:inline-block; width: 185px; height: 240px; background: #ececec;"></div>
<p>
<label for="total">Width:</label>
<input type="text" id="total" class="total" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider" style="width: 230px"></div>
</div>
<!-- Door -->
<div class="after" style="display: inline-block;">
<p>
<label for="tot1"> Height:</label>
<input type="text" id="tot1" class="tot1" disabled style="border:0; color:#fa4b2a; font-weight:bold; background: #fff;">
</p>
<div id="rangeSlider1" style="height:250px; display: inline-block;"></div>
<div style="display:inline-block; width: 185px; height: 240px; background: #ececec;"></div>
<p>
<label for="total1">Width:</label>
<input type="text" id="total1" class="total1" disabled style="border:0; color:#fa4b2a; font-weight:bold; background: #fff;">
</p>
<div id="mySlider1" style="width: 230px"></div>
</div>
</body>
</html>
This table with dimensions
I am more versed in PHP but I have to code a loan calculator using javascript and jquery ui.
I have 3 sliders, here the code of one of them:
$('#amountSlider').slider({
range: "min",
value: 37,
min: 1000,
max: 20000,
slide: function( event, ui ){
$("#amount").val( "$" + ui.value );
}
});
$("#amount").val("$" + $("#amountSlider").slider("value"));
HTML where the values are output:
<input type="text" name="amount" id="amount"><br>
<input type="text" name="rate" id="rate"><br>
<input type="text" name="term" id="term"><br>
<input type="text" name="calcTotal" id="calcTotal"/>
The sliders work fine and show the value in the text box but I can't seem to access the values outside the sliders to add them all into a total calculation text box.
Example:
Slider 1 value : 50
Slider 2 value: 3
Slider 3 value: 5.5
I'd like to be able to say : calcTotal = slider1.val + slider2.val + slider3.val and that the value is always updating as i drag the slider.
A live example I found is the homepage calculator at : http://blinkfinance.com.au/
Appreciate your help, thank you.
Call a function, which accesses the other values and sum them there up.
Of course you could then split this all up in a service, cache the elements etc. but you get the idea.
$( function() {
var output = $('#output');
$( "#slider1" ).slider({
slide: function( event, ui ) {
output.text( getAllValues() );
}
});
$( "#slider2" ).slider({
slide: function( event, ui ) {
output.text( getAllValues() );
}
});
$( "#slider3" ).slider({
slide: function( event, ui ) {
output.text( getAllValues() );
}
});
function getAllValues() {
return getValue("1") + getValue("2") + getValue("3");
}
function getValue(id) {
return $("#slider" + id).slider("value");
}
});
#import url(http://fonts.googleapis.com/css?family=Lato:400,700);
body {
background-color: #f0f0f0;
color: #333;
font-family: Lato, Helvetica, Arial, sans-serif;
margin: 25px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider1"></div>
<br>
<div id="slider2"></div>
<br>
<div id="slider3"></div>
<br><br>
<div id="output">Drag..</div>
I need to make the slider look like this:
As you can see, there is a limit (dark line) in the full capacity (light line).
I have this code so far:
<p>
<label for="amount">Amount:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
var myMax = 500;
$( "#slider" ).slider({
range: "min",
value: 300,
min: 1,
max: 2000,
create: function(event, ui) {
$( "#amount" ).val(ui.value);
},
slide: function(event, ui) {
if(ui.value > myMax) {
return false;
ui.value = myMax;
}
$( "#amount" ).val(ui.value);
}
});
JSFIDDLE: https://jsfiddle.net/jimmyadaro/vp00n013/
Is this possible to do?
While I'm sure there are other jQuery plugins to accomplish this, here's a quick hack using your code.
First, create another <div> within your slider:
<div id="slider">
<div id="limit"></div>
</div>
Next, have JS calculate the percentage of myMax, and use a bit of jQuery to set the width of #limit to the appropriate percentage.
var myMax = 500;
var max = 2000;
var limit = $("#limit");
limit.css("width", (myMax/max)*100+"%" )
Finally, style the #limit, for example:
#slider {
position: relative;
}
#limit {
position: absolute;
height: 100%;
background: #afb1b2;
}
Here's a JSFiddle demonstrating the hack.
I'm in need of a solution to show a calculated default number with a slider I'm using. The default slider value is set to "800". The calculated amount should then show as "99". However, the calculated amount doesn't show up until the user moves the slider - then, no issues. How can I set it up so that it already has the default calculated amount of "99" (based on "800") on page load?
Thanks so much!
$(function() {
$( "#slider-range-max" ).slider({
range: "100px",
min: 500,
max: 1500,
value: 800,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value ); //ui.value inside the event contains the slider value
var x=$("#amount").val(); //this way you access slider value anywhere in your code
var y=1.49;
var a= Math.round(x*y/12);
$("#product").html(a);
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<input type="text" id="amount" style="border:0
; font-size: 40px; color:#f6931f; font-weight:bold;">
<label for="amount" style="border:0
; font-size: 10px; color:#f6931f; font-weight:bold; "> / per month</label>
</p>
<div id="slider-range-max"></div>
<br/>
style="border:0; font-size: 40px; color:#f6931f; font-weight:bold;">
$<span id="product"></span>
</p>
</body>
</html>
You could move your calculation out into a function, move your default value into a variable, and then do this:
function calculateResult(value) {
return Math.round(value * 1.49 / 12);
}
$(function() {
var defaultValue = 800;
$("#product").html( calculateResult ( defaultValue ));
$( "#slider-range-max" ).slider({
range: "100px",
min: 500,
max: 1500,
value: defaultValue,
slide: function( event, ui ) {
var productValue = calculateResult( ui.value );
$( "#amount" ).val( ui.value ); //ui.value inside the event contains the slider value
$("#product").html(productValue);
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
In this jsBin file an alert (which just displays 'fired') is called three times.
It should be just called once since its just added to :
.data( "autocomplete" )._renderItem = function( ul, item ) {
Here is the bin file :
http://jsbin.com/welcome/55641/edit
How can the code be amended so that the alert is just fired once ?
The entire code :
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
fieldset {width: 60%; margin: 0 auto;}
div.row {clear: both;}
div.row label {float: left; width: 60%;}
div.row span {float: right; width: 35%;}
</style>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
alert('fired');
return $("#suggestionsDiv").append("<div class='row'> <label for='first-field'>The first field</label><span><input type=text id='first-field' size='15' /></span></div>");
};
});
</script>
</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" />
<input id="project" />
<input type="hidden" id="project-id" />
<p id="project-description"></p>
<fieldset>
<legend>Suggestions</legend>
<div id ="suggestionsDiv">
<div class="row">
<label for="first-field">The first field</label>
<span><input type="text" id="first-field" size="15" /></span>
</div>
<div class="row">
<label for="second-field">The second field with a longer label</label>
<span><input type="text" id="second-field" size="10" /></span>
</div>
<div class="row">
<label for="third-field">The third field</label>
<span><input type="text" id="third-field" size="5" /></span>
</div>
</div>
</fieldset>
</body>
</html>
When you type j in the field as suggested, three items are returned. For each item, the _renderItem method is being called to render each item, resulting in three alerts. It is working as intended.