I have the following slider
$( "#slider-min-bw" ).slider({
range: true,
min: $("#BwLowerHidden").val(),
max: $("#BwUpperHidden").val(),
values: [ $("#BwLowerHidden").val(), $("#BwUpperHidden").val() ],
slide: function( event, ui ) {
$( "#slider-min-bw-range" ).val(ui.values[ 0 ] + "-" + ui.values[ 1 ] );
}
});
$( "#slider-min-bw-range" ).val( $( "#slider-min-bw" ).slider( "values", 0 ) + "-" + $( "#slider-min-bw" ).slider( "values", 1 ) );
When I alert like,
alert($("#BwLowerHidden").val());
alert($("#BwUpperHidden").val());
I get the values as 2 and 10000 . But on the UI, I only get one handler and range appears to be 2-2 instead of 2-10000.
But at the same time, another slider like below, works perfectly as intended.
$( "#slider-min-dist" ).slider({
range: true,
min: $("#DistLowerHidden").val(),
max: $("#DistUpperHidden").val(),
values: [ $("#DistLowerHidden").val(), $("#DistUpperHidden").val() ],
slide: function( event, ui ) {
$( "#slider-min-dist-range" ).val(ui.values[ 0 ] + "-" + ui.values[ 1 ] );
}
});
$( "#slider-min-dist-range" ).val( $( "#slider-min-dist" ).slider( "values", 0 ) +"-" + $( "#slider-min-dist" ).slider( "values", 1 ) );
What could possibly be wrong in the first snippet?
As suggested in this post,
http://stackoverflow.com/questions/13213054/jquery-slider-ui-not-sliding
the value should be a number.
Using a parseInt() did the trick.
Related
I use JQuery range slider. when I dynamically set values for the slider it give me error
Error: cannot call methods on slider prior to initialization;
attempted to call method 'values'
My code
$( "#slider-range" ).slider( "values", 0, startRange);
$( "#slider-range" ).slider( "values", 1, endRange);
where startrange and endRange contain dynamic values.
Please Help.
If you're attempting to set the values option, you will want to do so like this:
$( "#slider-range" ).slider( "option", "values", [ startRange, endRange ]);
Just calling $( "#slider-range" ).slider( "values", 0, startRange); calls the Method, and to do that you need to init the slider first:
$( "#slider-range" ).slider();
$( "#slider-range" ).slider( "values", 0, startRange);
$( "#slider-range" ).slider( "values", 1, endRange);
I'm trying to refresh a single WMS layer source. Goal is to use a parameterized SLD with different thresholds. Points are drawn with different size and colour depending on these values.
var source = new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/Global/wms',
params: {
LAYERS: 'cities',
VERSION: '1.3.0',
CQL_FILTER: "ISO_A2 IN ('DE', 'FR', 'BE', 'PT', 'CZ', 'NL', 'ES', 'AT', 'CH', 'HU', 'PL', 'SE', 'NO', 'DK', 'IT', 'GB', 'IE')",
STYLES: 'ring_dynamic',
ENV: 'LOW_MAX:' + low_max + ';MED_MAX:' + med_max
}
})
After setting low_max and med_max parameters the layer should be reload to make the changes visible.
I've tried the following two statements but none of them worked.
source.changed();
source.dispatchEvent('change');
Using OpenLayers 3.6 and 3.6.
€dit:
I use a jQueryUI-Slider to trigger the reload:
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 5000000,
values: [ 500000, 2000000 ],
slide: function( event, ui ) {
$( "#grenzen" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
low_max = ui.values[0];
med_max = ui.values[1];
source.changed();
source.dispatchEvent('change');
}
});
$( "#range_limits" ).val( $( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
});
This code is placed below the previously shown code.
Use updateParams on the source http://openlayers.org/en/v3.7.0/apidoc/ol.source.TileWMS.html#updateParams
I use openlayers v4.6.5 and I solved this problem like that
layerChanged(layer){
layer.getSource().clear();
layer.getSource().refresh();
}
I have multiple sliders and it updates the total slider accordingly per each slider. When I go to slide another slider it subtracts it again from the original total value and not the updated value that was from subtracting the previous slider amount.
// Photographer Slider
$('#TablePhotographer').toggle(this.checked);
$(function() {
$( "#photo-range-min" ).slider({
range: "min",
value: photo,
min: 1,
max: photo,
slide: function( event, ui ) {
$( "#photo_amount" ).val( "$" + ui.value );
$( "#total_amount").val("$" + (Number(ui.value) + Number(CityValue - photo)));
}
});
$( "#photo_amount" ).val( "$" + $( "#photo-range-min" ).slider( "value" ).toFixed(2) );
});
// Ceremony Slider
$('#TableCeremony').toggle(this.checked);
$(function() {
$( "#ceremony-range-min" ).slider({
range: "min",
value: ceremony,
min: 1,
max: ceremony,
slide: function( event, ui ) {
$( "#ceremony_amount" ).val( "$" + ui.value );
$( "#total_amount").val("$" + (Number(ui.value) + Number(CityValue - ceremony)));
}
});
//total slider
$('.BudgetTable').fadeIn(500);
$( "#total-range-min" ).slider({
range: "min",
value: CityValue,
min: 1,
max: CityValue,
slide: function( event, ui ) {
$( "#total_amount" ).val( "$" + ui.value);
}
});
$('#state_cost').text("Based on your selecttion, the average wedding cost in this state is $" + CityValue);
$( "#total_amount" ).val( "$" + $( "#total-range-min" ).slider( "value" ) );
As you can see, 2 sliders subtract from the same value, but I need to store the changed value per slider and show them in the total slider. I want to be able to be able to update the value according to each slider.
I am working with jQuery UI slider.
Here is the code i am using:
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: 5,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
There will be 5 steps and I'd like to show the strings in each step instead of the numbers:
1=very sad
2=sad
3=not so sad
4=happy
5=very happy
How can I do this ?
You can put your step labels in an array, then use the slider's value as an index into that array:
var steps = [
"very sad",
"sad",
"not so sad",
"happy",
"very happy"
];
$(function() {
$("#slider").slider({
value: 1,
min: 0,
max: 4,
step: 1,
slide: function(event, ui) {
$("#amount").val(steps[ui.value]);
}
});
$("#amount").val(steps[$("#slider").slider("value")]);
});
i've got a problem with updating slider value from code. i have tried
$('#slider').slider('value', newValue);
$('#slider').val(newValue).slider();
$('#slider').val(newValue).slider('refresh');
and no result
any other suggestions
here is a sample code
Determines the value of the slider, if
there's only one handle. If there is
more than one handle, determines the
value of the first handle.
Code examples
Initialize a slider with the value option specified.
$( ".selector" ).slider({ value: 37 });
Get or set the value option, after init.
//getter
var value = $( ".selector" ).slider( "option", "value" );
//setter
$( ".selector" ).slider( "option", "value", 37 );
<html>
<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>
</html>
_
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 217,
values: [ 0, 217 ],
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] );
$( "#amount2" ).val( ui.values[ 1 ] );
}
});
$("#amount").change(function() {
$("#slider-range").slider('values',0,$(this).val());
});
$("#amount2").change(function() {
$("#slider-range").slider('values',1,$(this).val());
});
});
</script>
https://jsfiddle.net/brhuman/uvx6pdc1/
Just call showSlider() which was in slider.js file wherever u want. It will automatically refresh.