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.
Related
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);
} );
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
i have a problem with jquery slider value after changing it.
I'm just using normal jquery UI (version 1.10.4) and jquery core 1.7.2
First time after refresh i have a value which i want. But after the change i can't get it. And i need that to have a if statemnet which will change a value of the paragraph.
This is a JQuery code:
$(function() {
$( "#slider" ).slider({
range:"min",
min: 0,
max: 100,
value: 10,
slide: function wynik( event, ui ) {
$( "#price" ).val("$" + ui.value);
}
});
$( "#price" ).val( "$" + $( "#slider" ).slider( "value") );
var val = $('#slider').slider("value");
if ( val >= 20 ) {
$("#priceText").text("first text");
} else {
$("#priceText").text("second text");
}
});
What is wrong here?
I want to change a text in label:
<p>
<input type="text" id="price">
<label id="priceText" for="price">Some text to change</label>
</p>
Input working correctly and show the value all the time in right way. But label doesn't change (only first time after refresh).
I have read a lot of posts on SO before i post this one. For example:
How to get value from jQuery UI slider? or How to get value from input with dynamically changed value by jquery UI slider?
But i can't get it done anyway.
You can try this:
$("#selector").change(function() {
$("#slider-range").slider('values',0,$(this).val());
});
Working Fiddle
Jquery Slider emit a "slidechange" event everytime it change value
Remember, it should be listened on the jQuery element after you've registered the event in the element itself
$( "#slider" ).slider({
change: function( event, ui ) {
// register event here
}
});
$( "#slider" ).on( "slidechange", function( event, ui ) {
// use ui.value to get the current value
} );
Check the official api wiki for all the slider related events
Official Slider Api
I know there is a min value in jquery's slider. However, is there a way I can make the slider handle stop moving under some value? Is there any variable I can change to make this happen?
Note: My Slider is vertical
Basically, if the minimum is 20, I don't want the slider handle going under 20.
Well you can check it in slide functionality as below:
DEMO HERE
$(function() {
$( "#slider-range" ).slider({
orientation: "vertical",
range: false,
value:20,
slide: function( event, ui ) {
if (ui.value < 20) // corrected
return false;
else
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-range" ).slider( "value" ) );
});
I am trying to use jquery-ui slider ( http://jqueryui.com/demos/slider/#steps ) where the value of the slider position is displayed in an input box, and change in input box value re-positions the slider index.
js snippet:
$("#slider, ").slider({
range: "min",
value: 1,
step: 4,
min: 1,
max: 18,
slide: function( event, ui ) {
$( ".slider_input" ).val( "$" + ui.value );
//$( ".slider_input" ).val( ui.value );
}
});
$(".slider_input").change(function () {
var value = this.value.substring(1);
$("#slider").slider("value", parseInt(value));
});
html:
<div id="slider"></div>
<input class="slider_input" />
But I want to remove the dollar sign from the input . If I use $( ".slider_input" ).val( ui.value ); instead of $( ".slider_input" ).val( ui.value );, then manual change in input box value does not move the slider index position as expected.
How can I remove the dollar sign and make the slider work accordingly?
You can use the spit function.
> "$42.00".split('$')
[ '', '42.00' ]
> "$42.00".substring(1)
'42.00'
Here is a working fiddle: http://jsfiddle.net/ranjith19/wm8Dh/5/
Use replace to remove $ from the value.
$( ".slider_input" ).val( ui.value.replace("$","") );