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.
Related
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());
}
I am currently comparing our price slider http://www.showstyle.lu/homme/ to that on http://theme-lookz-responsive.webshopapp.com/en/designer/ and as you can see under filters if you drag the filter on our homepage (ShowStyle) the number value of the min & max do not update dynamically i.e. you have to guess where to let go of the slider and hope it lands on a price.
On the example website: if you drag the price filter the min & max values update dynamically making it easier to see what your settings are.
I tried comparing the code of both filter price boxes and saw this additional script they implemented but couldn't figure out if that is what caused it, I think it is but any idea how to re-enact that onto my template? Both are using the same CMS so utilising this code is permitted, it's just a comfort update. I managed to adjust the code but don't understand if I should replace the "ui" syntax with price-filter-range or min/max syntax.
Original Script
<script type="text/javascript">
$(function(){
$('#filter_form input, #filter_form select').change(function(){
$(this).closest('form').submit();
});
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 20,
values: [0, 20],
step: 1,
slide: function( event, ui){
$('.sidebar-filter-range .min span').html(ui.values[0]);
$('.sidebar-filter-range .max span').html(ui.values[1]);
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form').submit();
}
});
});
The 0/20 values are depending on the page you were on so I suppose that also needs to be dynamic based on the highest price item on the current catalog page
Any help is greatly appreciated, thanks a lot!
Try this:
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 750,
values: [$('#filter_form_min').val(), $('#filter_form_max').val()],
step: 1,
slide: function( event, ui){
$('.price-filter-range .min span').text(ui.values[0]);
$('.price-filter-range .max span').text(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
$('#filter_form').submit();
}
});
Please note this code (in my answer) been updated from the original due to a misunderstanding. I have also re-edited it to fix functionality that was broken by the inclusion of this code.
Edit: I just noticed that your site already includes the JS code
$(function(){
$('#filter_form input, #filter_form select').change(function(){
$(this).closest('form').submit();
});
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 750,
values: [0, 520],
step: 1,
slide: function( event, ui){
$('.sidebar-filter-range .min span').html(ui.values[0]);
$('.sidebar-filter-range .max span').html(ui.values[1]);
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form').submit();
}
});
});
However this code is being dynamically generated by the server (notice how 520 is embedded into the script)... The only reason it's not working is because it's expecting the class name to be sidebar-filter-range instead of price-filter-range. If you could just make the correct modification so that it's pointing to the correct elements then it should work.
Using OpenLayers 2.13. I have a map with 2 vector layers, and a JQuery slider which allows adjustment of the layer opacity.
If I set up a selector to include both layers (for highlighting and popups), my JQuery slider to adjust the opacity doesn't work (layername.setOpacity(x) fails to set the opacity of the layer). If only one layer participates in the selector then setOpacity works fine. Both layers use the same styleMap.
$("#slider-id").slider({
value: 70,
min: 10,
max: 100,
step: 10,
slide: function(e, ui) {
layer1.setOpacity(ui.value / 100);
layer2.setOpacity(ui.value / 100);
} });
This selector allows the opacity to be set for both layers:
var selector = new OpenLayers.Control.SelectFeature(layer1,{
hover:false
});
But this selector does not (setOpacity() fails no matter what):
var selector = new OpenLayers.Control.SelectFeature([layer1, layer2],{
hover:false
});
The Selector is added and activated.
map.addControl(selector);
selector.handlers.feature.stopDown = false; //allow dragging on map
selector.activate();
Is there some way to have multiple layers participate in the selector, while allowing the opacity to be changed?
It might be bad form to answer your own question, but I found a workaround and am posting it here for anyone else with this problem.
Deactivate the selector before changing the opacity.
$("#slider-id").slider({
value: 70,
min: 10,
max: 100,
step: 10,
slide: function(e, ui) {
selector.deactivate();
layer1.setOpacity(ui.value / 100);
layer2.setOpacity(ui.value / 100);
selector.activate();
}
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){