I am trying to fill the current range portion of my slider bar - and as a lot of other people have - fallen into a pit! For some reason when I move my bar - the portion does not 'fill' with a colour as expected.
This is my markup :
<script>
//START OF AMOUNT CODE
var valMap = [1000, 1500, 2000, 2500];
$(function() {
$("#amount-range").slider({
min: 0,
max: valMap.length - 1,
value: 0,
slide: function(event, ui) {
$("#amount").val(valMap[ui.value]);
}
});
$("#amount").val(valMap[$("#amount-range").slider("values", 0)]);
//END OF AMOUNT
});
</script>
</head>
<body>
<div id="productDetails" style="width:360px; max-width:360px;">
<div id="amount-range" ></div>
The CSS I am using is:
.ui-slider-range { background: #88ac0b; }
I am expecting this to be wrong....I have also tried:
#amount-range.ui-slider-range { background: #88ac0b; }
To no avail - can somebody please help!
Andy
The problem was because I had the range variable missing from my slider declaration:
so this now works (not complete syntax but important component is the range line! :
var durationSlider = $( "amount-slider)({
min: 0,
max: valMap.length - 1,
range:"min",
value: 0,
slide: function(event, ui) {
$("#amount").val(valMap[ui.value]);
}
Related
I'm using the library "jquery-asProgress.js" to produce 100% complete bar graphs.
Library can be found here: https://github.com/thecreation/jquery-asProgress
I'd like to have the bar change color when 100% is reached.
Current code is as follows:
<div class="progress" role="progressbar" data-goal="15" aria-valuemin="0" aria-valuemax="100">
<div class="progress__bar"><span class="progress__label"></span></div>
</div>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress__bar"><span class="progress__label"></span></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="../dist/jquery-asProgress.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.progress').asProgress({
namespace: 'progress',
bootstrap: false,
min: 0,
max: 100,
goal: 100,
speed: 10, // speed of 1/100
easing: 'ease',
labelCallback: function labelCallback(n) {
var percentage = this.getPercentage(n);
return percentage + '%';
}
});
$('.progress').asProgress('start');
});
</script>
I tried adding this section to allow a class to be added if the value is 100 but it just breaks the JS
$('.progress').asProgress({
var percentage ="100";
$('progress__bar').addClass("wishlist_100");
});
EDIT:
I've altered using the suggestion by #Roamer-1888, the trouble is that they all get the class applied, not just the Value of 100.
jQuery(function($) {
$('.progress').asProgress({
namespace: 'progress',
bootstrap: false,
min: 0,
max: 100,
goal: 100,
speed: 10, // speed of 1/100
easing: 'ease',
labelCallback: function labelCallback(n) {
var percentage = this.getPercentage(n);
return percentage + '%';
}
}).on('asProgress::finish', function(e) {
$('.progress__bar').addClass('wishlist_100');
}).asProgress('start');
});
You need to establish a handler for the finish event;
jQuery(function($) {
$('.progress').asProgress({
'namespace': 'progress',
'bootstrap': false,
'min': 0,
'max': 100,
'goal': 100,
'speed': 10, // speed of 1/100
'easing': 'ease',
'labelCallback': function(n) {
return `${this.getPercentage(n)}%`;
}
}).on('asProgress::finish', function(e) {
// change colour here.
}).asProgress('start');
});
I managed to get this functional using a combination of solutions however it may not be the "right way" to do this.
The limitation present now is that the JS query breaksdown if the value supplied for "data-goal" is over 100, however I will have my backend developer supply a limiter on his end. We're developing using Classic ASP for those curious.
Many thanks to #Roamer-1888 for his help.
jQuery(function($) {
$('.progress').asProgress({
namespace: 'progress',
bootstrap: false,
min: 0,
max: 100,
goal: 100,
speed: 10, // speed of 1/100
easing: 'ease',
labelCallback: function labelCallback(n) {
var percentage = this.getPercentage(n);
return percentage + '%';
}
});
$('.progress').asProgress('start');
$(".progress[data-goal='100']").find('.progress__bar').addClass('wishlist_100');
});
Is it possible to create my own steps in jquery UI slider?
For example, I have 5 steps: 0, 1200, 2000, 2200 and 3000. Somebody know how to do this?
const rangeSliderInit = () => {
const valueArray = [0, 400, 1000, 1500, 2000, 3000, 420
$(".slider").slider({
value: 400,
min: 0,
max: 4200,
});
}
It's just a matter of displaying the right value (it can be something else in reality).
Create an array of the values. Set max value to the amount of options in your array and step 1.
Here i just make the sliders min=0 and max = 4, with a step of 1.
You can use sizes[ui.value] as your value of the slider.
On changing the slider value
var sizes = [0, 1200, 2000, 2200, 3000];
$("#slider").slider({
min: 0,
max: sizes.length - 1,
step: 1,
slide: function(event, ui) {
$("#slider-value").text(sizes[ui.value]);
}
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<h1>HTML Slider Test</h1>
<div id="slider"></div>
<p>Your slider has a value of <span id="slider-value"></span></p>
Code so that you can see what im working with.
$("#slider-markup").slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 500,
value: 0,
step: 0.01,
slide: function (event, ui) {
$("#markupRate").text(ui.value);
calcNow();
}
});
Okay so I know how to step increment as you can see here its a very fine step I'm using but its difficult to get to the right value due to the high range.
I also know that the slider can be used with the mouse and once activated can be moved to the next step with the keyboards arrows.
What I would like to be able to do is set a mouse step of 1. then a keyboard step of 0.01
Is this possible, has it been done? I've been looking around for this sort of functionality of sliders but am coming up empty.
The quick answer:
$(function() {
$("#slider-markup").slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 500,
value: 0,
step: 0.01,
slide: function(event, ui) {
$("#markupRate").text(ui.value);
}
});
$("#slider-markup .ui-slider-handle").mousedown(function() {
$("#slider-markup").slider("option", "step", 1.0);
}).mouseup(function() {
$("#slider-markup").slider("option", "step", 0.1);
});
});
Working Example: https://jsfiddle.net/Twisty/xkwq87j6/
You can adjust the step option by biding a callback to specific events.
I am trying to build a ui slider similar to the one on this site: http://www.solarcity.com/
I want to be able to show the monthly value and then a yearly value next to it. ( I would assume multiplying the value of the monthly by 12 of course)
Once upon a time I had my slider working properly until I tried to multiply the monthly value by 12.
What did I do wrong?
(Sorry I am totally new to JavaScript)
Here is my Jsfiddle: http://jsfiddle.net/7qDyq/1/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year
<div id="bill_slider">
</div>
$(document).ready(function(){
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (monthly_bill * 12 )
$("#monthly_bill").text(tasks_time);
$("#monthly_bill").text(tasks_done);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function() {
update();
}
});
});
Eventually after I figure this out I am also wondering how to change the color of the slider and words after the slider hits a certain point. (If then statement?) Not sure how to implement...
Any help on this is greatly appreciated. Thanks!
Most of the issues in your original jsFiddle traced back to bad JS var names; here is how you would achieve the desired effect:
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (bill_slider * 12)
$("#monthly_bill").text(bill_slider);
$("#yearly_bill").text(yearly_bill);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function () {
update();
}
});
Working jsFiddle, forked from yours: http://jsfiddle.net/6Bprf/5/
If you update your question with a description & example of the color-coding you want to do, we can include that in our answers.
http://jsfiddle.net/ntSrb/4/
Problem: The second slider should decrement in steps of 1 as the first slider changes by steps of 3
I have inspected the changes of the second slider and its as if the first time the first slider changes it works, after that the second slider just doesnt register new values
Also the second slider jumps randomly if you pull the first slider by large steps.
This is a simplified version of my problem because in reality I have 4 sliders which will affect eachother in a similar way (as one slider increments by 3, then the three other sliders decrements by 1)
HTML
<span id="firstspan">25</span>
<div id="firstrange" style="max-width: 300px;"></div>
<span id="secondspan">25</span>
<div id="secondrange" style="max-width: 300px;"></div>
JS
function updateSpans(numberChange) {
var oldval;
var newval;
oldval = $("#secondrange").slider("value"); //number
newval = Math.round(oldval + numberChange / 3);
$('#secondrange').slider("option", "step", 1);
$("#secondrange").slider("option", "value", newval);
$('#secondrange').slider("option", "step", 3);
$("#secondspan").text(newval);
}
$(function () {
$("#firstrange").slider({
orientation: "horizontal",
min: 0,
max: 100,
value: 25,
step: 3,
slide: function (event, ui) {
var currentvalue = ui.value; //number
var oldvalue = parseInt($('#firstspan').text()); //number
$("#firstspan").text(currentvalue);
updateSpans(oldvalue - currentvalue);
},
});
});
$(function () {
$("#secondrange").slider({
orientation: "horizontal",
min: 0,
max: 100,
value: 25,
step: 3,
});
});
Please see this jsFiddle Link. I have change your jsfiddle code and now it works. Please check. Change in line 22:
change: function(event, ui){