Jump to content

[jQuery] Slider that changes the font-size, little problem


AntoLeNice

Recommended Posts

Hi there,

I had to make a slider bar to change the font-size of a website. The problem is:

When I slide up, the text gets bigger, but when I slide down once, it gets bigger one more time before it starts getting smaller.

When I slide down, the text gets smaller, but when I slide up once, it gets smaller one more time before it starts getting bigger.

 

You know what I mean ?? The text should really follow the slider value to get its size, but it doesn't because of this.

 

Here is the code I use for the slider:

 

$(document).ready(function() {
//get current font-size
var current_font_size=$("#texte").css("font-size");
//add to attribute "title"
$( "#slider" ).attr("title",current_font_size);
current_font_size=parseInt(current_font_size);

//create slider
$("#slider").slider({
	value: current_font_size, //size at the start
	orientation: 'horizontal',
	min: 10, //minimum size
	max: 20, //maximum size
	slide: function(event, ui) { //on slide
		var value = $( "#slider" ).slider( "option", "value" ); //getting the new value
		$("#texte").css("font-size",value); //modify css
		$("#slider").attr("title",value.toString()+"px"); //adding title to the handle
		$(".size").html(value.toString()+"px"); //show the new size
	}
});
});

 

Thanks a lot, and I hope you can help me, Antoine

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.