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.
Related
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.
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'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" ) );
});
i want to enable/disable a slider every time a button is clicked.
here is the fiddle:
<div id="points" style="width:50px; margin-top: 17px; height:5px "></div>
<button id="lines" type="button" style="width:75px; height: 30px; margin-top:7px">lines</button>
$(function () {
$("#points").slider({
value: 100,
min: 1,
max: 100,
slide: function (event, ui) {
}
});
$('.ui-slider').slider('disable');
$('.ui-slider-handle').height(12);
});
Add this to your fiddle
$("#lines").click(function () {
var disabled = $( ".ui-slider" ).slider( "option", "disabled" );
$('.ui-slider').slider("option", "disabled", !disabled);
});
JQuery code:
$('#lines').click(function(){
if($('.ui-slider').hasClass('ui-slider-disabled'))
$('.ui-slider').slider('enable');
else
$('.ui-slider').slider('disable');
});
Updated fiddle: http://jsfiddle.net/D2RLR/4861/