We Keep Coding

Trying to get Tooltip for the Current Position

I have a slider and an small input text box which updates based on where you scroll on it.
Here is the javascript:
$(function() {
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#client-slider").slider({
range: "min",
value: 30,
min: 15,
max: 300,
slide: function(event, ui) {
$('#client').val(ui.value).trigger("change");
tooltip.text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show();
}, function() {
tooltip.hide();
});
});
$("#client").val($("#client-slider").slider("value"));
}
And here is the html/css:
<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider"></div>​
I am getting an error could not able to show tool tip on my slider
**Plz note its not the duplicate of any existing question - I was trying to get help from this answer but all in vain

It is often a bad idea to get answers from old posts. This implementation is much more up to date and much less complicated:
document.getElementById("slider").addEventListener("input", function(event) {
document.getElementById("budget").value = event.target.value;
})
<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>
Full code:
<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>
<script type="text/javascript">
document.getElementById("slider").addEventListener("input", function(event) {
document.getElementById("budget").value = event.target.value;
})
</script>
For the JQUERY implementation based off this answer:
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
tooltip.text((ui.value/1000)*100 + "%");
$( "#client" ).val((ui.value/1000)*100 + "%");
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show()
}, function() {
tooltip.hide()
})
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider" style="margin:50px"></div>
<!-- Get ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Try it on fiddle as well.

Calculate with slider value of width

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

Accessing slider values

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>

Style jQuery UI slider like this

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.

how to reduce javascript code using $this or passing vars

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" ) );
}