We Keep Coding

jQuery slider incorrect behaviour

I created slider using the following code available on jsfiddle:
http://jsfiddle.net/3cpsoft1/
However there is some weird behavior when the max value element of the slider is changing itself when left slider is activated.
I think this has something to do with ui part of the slider function but I don't know what is affecting it.
So at first the correct value is 0.0474 and it should stay that way. But somehow it becomes negative as if one value of step was deducted from it.
You can see that on the fiddle i provided.
Is there a way to fix this?

When you divide your total length by the step, you'll end up with a small remainder which is not able to render. Therefore, you must set it to the smallest decimal value you want slide over. Also, your max value should be outside the bound.
$( function() {
$( "#slider-range-max" ).slider({
range: true,
min: -1000,
max: 0.475,
step: .001,
values: [-1000,0.474],
slide: function( event, ui ) {
$( "#amount1" ).val( ui.values[0] );
$( "#amount2" ).val( ui.values[1] );
}
});
$( "#amount1" ).val( -1000 );
$( "#amount2" ).val( 0.474);
} );

Integrating custom jQuery slider

New to front-end development and getting confused with jQuery. I have a jQuery slider with custom steps, but can't get the output to sync with the rest of my program. I think I need .addEventListener('input') to take the values produced by the slider so that the text at the bottom of the output (#infocenter) updates with the year chosen by the slider.
document.getElementById('infocenter').innerHTML = '<p>(this text should update with the year above)</p>';
var sliderAmountMap = [1940, 1950, 1960, 1970, 1980, 1990, 2009, 2015];
//new jQuery slider
$(function() {
$( "#slider" ).slider({
value: 0,
min: 0,
max: sliderAmountMap.length-1,
slide: function( event, ui ) {
$( "#amount" ).val(sliderAmountMap[ui.value] );
}
});
$( "#amount" ).val(sliderAmountMap[$( "#slider" ).slider( "value")] );
});
https://jsfiddle.net/kaseyklimes/c0xpL1va/

If I understand correctly, I think you just need to update the html of the desired element at the same time you're updating the value of the text box:
slide: function( event, ui ) {
$( "#amount" ).val(sliderAmountMap[ui.value]);
$( "#infocenter" ).html(sliderAmountMap[ui.value]);
}
Updated JSFiddle

Jquery ui slider controls not updating value

I've set up a JQuery UI range slider with controls, although when clicking on the controls the value sent to a select dropdown is not updated. How could I fix this?
var gmin = 0;
var gmax = 500;
var s = $( "#slider" ).slider({
value:5,
min: gmin,
max: gmax,
step: 100,
slide: function( event, ui ) {
$( "#select span" ).html(ui.value);
}
});
$('#down').click(function() {
s.slider('value', s.slider('value') + s.slider( "option", "step" ) );
});
$('#up').click(function() {
s.slider('value', s.slider('value') - s.slider( "option", "step" ) );
});
View JSFiddle

You need to use the change event, not slide here. slide() only catches manual user slides, not programmatic ones:
var s = $( "#slider" ).slider({
value:5,
min: gmin,
max: gmax,
step: 100,
change: function( event, ui ) {
$( "#select span" ).html(ui.value);
}
});
(Any reason your down button makes it go up and vice versa?)

Since this event wont store value for this element, besides here is workaround:
http://jsfiddle.net/nrNX8/514/
You have to add
$('#select span').text(s.slider('value'));
It may be useful for any element you want to set in any update.

You just need to add this line to the click functions:
$( "#select span" ).html(s.slider('value'));
...on #up and #down listeners.
However, it seems that Ivan's answer is a better approach than mine

jquery form slider (input-slider)

How to make slider with jquery, like here?
User should select a value from slider, and this value should automatically be in input
I can not find the appropriate plug-in...

http://jqueryui.com/demos/slider/
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
//Its setting the slider value to the element with id "amount"
$( "#amount" ).val( "$" + ui.value );
}
});
You can customize the style to look like the example you mentioned.

Controlling a processing.js sketch w/ a jQuery slider

I've had some luck controlling processing.js sketches using html form elements and would like to use a jQuery slider to do the same.
<script>
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 37,
min: 1,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
</script>
<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
</p>
<div id="slider-range-min"></div>
I think my main problem is that I don't entirely understand the slider function, how to refer to its value inside the sketch, or how to refer the window.processing.Data={}; variable inside the slider.
Any and all help is appreciated.

Here's a working demo if it helps:
http://matrix.senecac.on.ca/~asalga/FSOSS2010/jQueryUI/jquery-test.html

I've never used Jquery-ui's slider before so I'm not sure if your using it correctly. But you can easily communicate between the processing code and the javascript code by placing a variable on the window object:
1) window.communicate = {}
2) store variables on that object : window.communicate.myVar
3) alter the variables in javascript:
// inside jquery-ui callback
window.communicate.myVar = ui.value;
4) read the variables in processing
I created a a demo for you on jsfiddle: http://jsfiddle.net/Zevan/Rms2N/2/
UPDATE
So in your slide function you can set a variable on your communicate object:
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
window.communicate.value = ui.value;
}
Then you can use "window.communicate.value" anywhere in your processing.js code.