We Keep Coding

jQuery UI Slider displays initial value on lowest setting

I have the following script for a jQuery UI slider. The script shows the amount in a div with id #skizzar_payment_amount
When I scroll to the lowest amount (0), the value in the div shows the initial amount instead of 0.
See here:
<script>
jQuery(function($) {
var initialValue = 7.5;
var maxValue = 20;
var stepValue = 0.25;
var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#skizzar_payment_amount").val(ui.value); //change amount in hidden input field
}
$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
});
$("#skizzar_payment_amount").val($("#slider").slider("value"));
});
</script>
https://jsfiddle.net/yzzvd52y/

ui.value will be 0, which is false in this line: var curValue = ui.value || initialValue;
Change it to e.g.:
var curValue = ui.value !== undefined ? ui.value : initialValue;
Updated fiddle

I updated your fiddle and added the following code:
change: function( event, ui ) {
$("#skizzar_payment_amount").val(ui.value);
}

Try this:
jQuery(function($) {
var initialValue = 7.5;
var maxValue = 20;
var stepValue = 0.25;
var sliderTooltip = function(event, ui) {
var curValue = ui.value >= 0 ? ui.value : initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#skizzar_payment_amount").val(ui.value); //change amount in hidden input field
}
$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
change: function(event, ui) {
$("#skizzar_payment_amount").val(ui.value);
}
});
});

How do i update a label when input box has new value

I am trying to get a label to update when a user enters a value into a text box. I have managed to get the label to update when the slider bar value is changed by the user but i dont have the skill to get it to update when the text box changes.
I tried to write some code but it does not look right at all, can sombody lend me a hand?
Code i tried
$("#MonthlyRent").text({
textchange: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
Function to catch change
$(document).ready(function () {
$("#slider").slider({
range: "min",
animate: true,
value: 1,
min: 0,
max: 100,
step: 1,
slide: function (event, ui) {
update(1, ui.value + '%'); //changed
}
});
$("#slider2").slider({
range: "min",
animate: true,
value: 1,
min: 0,
max: 100,
step: 1,
slide: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
$("#MonthlyRent").text({
slide: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
//Added, set initial value.
$("#amount").val(0);
$("#duration").val(0);
$("#amount-label").text(0);
$("#duration-label").text(0);
$("MonthlyRent").text(0);
update();
});
update function
function update(slider, val) {
//changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
var $amount = slider == 1 ? val : $("#amount").val();
var $duration = slider == 2 ? val : $("#duration").val();
var $rent = $("#MonthlyRent").val();
var $amount2 = $amount.replace('%', '');
/* commented
$amount = $( "#slider" ).slider( "value" );
$duration = $( "#slider2" ).slider( "value" );
*/
$total = "£" + ($amount2 + $rent);
$("#amount").val($amount);
$("#amount-label").text($amount);
$("#duration").val($duration);
$("#duration-label").text($duration);
$("#total").val($total);
$("#total-label").text($total);
$('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $amount + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
$('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $duration + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}

Use the event change or keyup:
$('#mytextinput').on('change keyup', function (e) { /* You stuff here. */ })
Without HTML code, I guessed your input was something like <input type="text" id="mytextinput" />, but if it is not you should give more information.

To detect a change on a textbox use the following
http://jsfiddle.net/SrhYh/
$('#example').change(function() {
update();
});
function update() {
$('#result').text($('#example').val());
}
as an alternative listen to keyup
$('#example').keyup(function() {
update();
});
function update() {
$('#result').text($('#example').val());
}
http://jsfiddle.net/SrhYh/1/

If Conditions on jquery ui slider

I am trying to apply if..elseif.. condition on multiple UI sliders. Practically I want that certain slider show/hide depending on the ui.value but the if condition is not working correctly. A fiddle can be found here : http://jsfiddle.net/XWRDZ/
Code below:
HTML
<div id="label">Postpaid</div><br />
<div id="slider-range-max"></div>
<br />
<div id="slider-range-max-2"></div>
JS
<script>
var packageselection = 0;
$(window).load(function() {
$('#slider').hide();
$('#slider-range-max-2').hide();
});
$(function() {
var labelArr = new Array("Postpaid", "Hybrid", "SIM Only");
$( "#slider-range-max" ).slider({
min: 0,
max: 2,
value: 0,
step: 1,
change: function( event, ui ) {
$("#label").html(labelArr[ui.value]);
packageselection = ui.value;
if ( packageselection = 1 ){
$('#slider-range-max-2').show();
}
else if ( packageselection = 2 ){
$('#slider-range-max-2').hide();
}
}
});
});
$(function() {
$( "#slider-range-max-2" ).slider({
min: 1,
max: 3,
value: 1,
slide: function( event, ui ) {
}
});
});
</script>
Thanks so much for your help guys!

equal to is == or === not = (thats declaration)
if ( packageselection == 1 ){
$('#slider-range-max-2').show();
}
else if ( packageselection == 2 ){
$('#slider-range-max-2').hide();
}

How to trigger change event of slider on button click

I have a jQuery slider. I have two buttons i.e ZoomIn and ZoomOut. I want to slide the slider on these button click. Like by clicking ZoomIn it should slide towards right and by clicking ZoomOut it should slide towards left, and should call their respective slide function/event too.
Working Demo Here
$(document).ready(function () {
$("#zoomSlider").slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
"slide": function (event, ui) {
$("#zoom").val(ui.value + "%");
}
});
$("#zoom").val($("#zoomSlider").slider("value") + "%");
});
Updated
I also need a function to be called when slider changes. That function take two parameters 1)event 2)ui, how to get those parameteters when button click ? like :
$('#zoomIn').on('click', function () {
if (counter < 4.00) {//if counter less than max value
counter += .1;//increment counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
myFunction(event, ui);
}
});

Please try this:
$(document).ready(function(){
$("#zoomIn").click(function (){
var current = $( "#zoom" ).val().slice(0,-1);
var new_position = (parseFloat(current)+0.1) ;
$("#zoom").val( new_position +"%");
$("#zoomSlider").slider('value',new_position);
$( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
$("#zoomOut").click(function (){
var current = $( "#zoom" ).val().slice(0,-1);
var new_position_out = (parseFloat(current)-0.1) ;
$("#zoom").val( new_position_out +"%");
$("#zoomSlider").slider('value',new_position_out);
$( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
});
Demo

Try
$(document).ready(function () {
var counter = 0, //initialize counter
$slider = $("#zoomSlider");
$slider.slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
"slide": function (event, ui) {
$("#zoom").val(ui.value + "%");
counter = ui.value; //change counter value if user slides
}
});
$("#zoom").val($slider.slider("value") + "%");
counter = $slider.slider("value"); // set slider value in counter
$('#zoomIn').on('click', function () {
if (counter < 4.00) { //if counter less than max value
counter += .1; //increment counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
}
});
$('#zoomOut').on('click', function () {
if (counter > -3.32) { //if counter greater than min value
counter -= .1; //decrement counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
}
});
});
Demo http://jsfiddle.net/rbW35/5/

Example similar to what you want exists in official documentation. Slide event is only for mouse manipulation on slider, use change to capture slider changes. Here is fiddle
$(document).ready(function () {
var slider = $("#zoomSlider"),
counter = $("#zoom");
slider.slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
change: function (event, ui) {
counter.val(ui.value.toFixed(2) + "%");
}
});
counter.val(slider.slider("value").toFixed(2) + "%");
$('[type="button"]').on('click', function (event) {
var el = $(event.currentTarget),
mult = el.data().negative ? 1 : -1;
slider.slider("value", slider.slider("value") + slider.slider("option", "step") * mult);
});
});

jsFiddle Example
We first get the current value of the slider. Then, we set the slider value to the current value minus one.
$('#zoomOut').click(function() {
var current_value = $('#zoomSlider').slider('option','value');
$("#zoomSlider").slider("value", current_value-=1);
});
If you want the have the slider animate as it's changing value, you can change the "animate" parameter to "true" in the creation of the slider.

Update twitter button text dynamically

I have a function that averages all of the values from multiple sliders. I am trying to take the data I get from that average and insert into the tweet. Example: "I just scored 100 points playing this awesome game!" The point value obviously being changed dynamically based on the average value. I am very new to Javascript/Jquery so please include extreme amounts of details when answering. Thanks! Here is my Jquery:
$(function readTweet() {
$(document).ready(function () {
console.log($(".tweet").text());
});
$(function(average) {
var numberOfRatings = $(".rating").length,
average;
$( ".slider" ).slider().find(".ui-slider-handle").addClass("custom");
$( ".slider" ).slider({
range: "min",
value: 5,
min: 1,
max: 10,
slide: function( event, ui ) {
var total = 0;
$(this).siblings( ".rating" ).text(ui.value);
$(".rating").each(function () {
var ratingValue = parseInt($(this).text(), 10);
total = parseFloat(total + ratingValue);
console.log(ratingValue);
});
average =(total/numberOfRatings).toFixed(2);
$("#average").text(average);
$(".tweet").click(function (){
$(this).html("I just scored " + average + "points playing this awesome game!");
});
}
});
$( ".rating" ).text($( ".slider" ).slider( "value" ) );
$(".ui-slider-handle").focus(function() {
$(this).removeClass("ui-state-hover ui-state-default ui-state-focus ui-state-active");
});
});
});
HTML
<div id="grand-total">
<h1>Album Rating</h1>
<h2 type="text" id="average" value="0">0</h2>
Tweet to
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>