Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
See more: Javascript HTML
Hello i want to implement slider .
on increasing the length of slider font size is increase .
on decrease the length of slider font size is decrease.
Posted 19-Apr-13 1:37am
what have you tried?
ravi1989h at 19-Apr-13 6:43am
i don't have any idea? is it possible?
PrashantSonewane at 19-Apr-13 7:06am
I think you should try JQuery Slider. Get the value from slider and then assign it to font-size in body tag for the page.
check here jQuery UI slider:
ravi1989h at 19-Apr-13 7:09am
yes i saw but need to zoom in or zoom out while increase the slide length and decrease the length
ryanb31 at 19-Apr-13 7:52am
Just get a slider control and then implement the client side events.
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

<!doctype html>
<html lang="us">
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="css/ui-lightness/jquery-ui-1.10.2.custom.css" rel="stylesheet">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui-1.10.2.custom.js"></script>
        $(function () {
                change: function (event, ui) {
                    if (event.originalEvent) {
                        $('#lblText').css("font-size", ui.value);

                range: true,
                values: [10, 42]


    <label id="lblText">
        This is jquery UI slider</label>
    <div id="slider">
ravi1989h at 19-Apr-13 8:05am
When i copy this code and make html . slider is not display..:(
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

need to download jquery stuffs from the following link
and add the mentioned .css and .js file from the downloaded zip file
Rate this: bad
Please Sign up or sign in to vote.

Solution 3

The solution is quite simple
Just get jQuery and jQuery ui
    <link rel="stylesheet" href=""/>
    <script src=""></script>
    <script src=""></script>
Create the elements
<div id="slider-range-max"></div>
<p id="text">Text</p>
and change font-size on slide event.
  $( "#slider-range-max" ).slider({
      range: "max",
      min: 10,
      max: 70,
      value: 10,
      slide: function( event, ui ) {
        $( "#text" ).css( { fontSize: ui.value} );

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 7,373
1 OriginalGriff 5,571
2 Peter Leow 4,097
3 CHill60 2,858
4 Mika Wendelius 2,850

Advertise | Privacy | Mobile
Web04 | 2.8.150224.1 | Last Updated 19 Apr 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100