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>
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');
});
Here I've used jquery-ui.js so that it shows numbers from 0 to 2000000 and I'd like to show long number formatted like 2,000,000
<div class="slider>
<a id="minamount" style="">0</a>
<a id="maxamount" style="">2000000</a>
</div>
javascript:
$(".slider").slider({
min: 0,
max: 2000000,
values: [0, 2000000],
range: true,
step: 10,
slide: function (event, ui) {
$("#minamount").html(ui.values[0]);
$("#maxamount").html(ui.values[1]);
}
});
You can use Intl.NumberFormat() for doing it like -
const numberFormat = new Intl.NumberFormat();
$(".slider").slider({
min: 0,
max: 2000000,
values: [0, 2000000],
range: true,
step: 10,
slide: function (event, ui) {
$("#minamount").html(numberFormat.format(ui.values[0]));
$("#maxamount").html(numberFormat.format(ui.values[1]));
}
});
You can pass a bunch of values for your locale according to the documentation if you want it formatted according to a specific locale.
Note: On the initial load, the slide function is not called, in which case, you could manually call the slider('values') function of the slider after initialization to manually set the HTML in the beginning.
EDIT:
Find a sample Fiddle to play around
To format a string using thousands separator (eg 12,345) you can use toLocaleString().
$("#minamount").html(ui.values[0].toLocaleString());
See snippet below.
for (var i = 1.234; i < 10000000; i *= 10)
{
console.log(i.toLocaleString());
}
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 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]);
}
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){