Click here to Skip to main content
15,860,859 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
Comments
José Amílcar Casimiro 19-Apr-13 6:38am    
what have you tried?
ravi1989h 19-Apr-13 6:43am    
i don't have any idea? is it possible?
PrashantSonewane 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: http://jqueryui.com/demos/slider/
ravi1989h 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
ZurdoDev 19-Apr-13 7:52am    
Just get a slider control and then implement the client side events.

The solution is quite simple

Just get jQuery and jQuery ui

HTML
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

</head>


Create the elements
HTML
<div id="slider-range-max"></div>

<p id="text">Text</p>


and change font-size on slide event.

JavaScript
$( "#slider-range-max" ).slider({
    range: "max",
    min: 10,
    max: 70,
    value: 10,
    slide: function( event, ui ) {
      $( "#text" ).css( { fontSize: ui.value} );
    }
  });
 
Share this answer
 
v5
need to download jquery stuffs from the following link
http://jqueryui.com/download/

and add the mentioned .css and .js file from the downloaded zip file
 
Share this answer
 
XML
<!doctype html>
<html lang="us">
<head>
    <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>
    <script>
        $(function () {

            $('#slider').slider({
                change: function (event, ui) {
                    if (event.originalEvent) {
                        $('#lblText').css("font-size", ui.value);

                    }

                }
            });


            $("#slider").slider({
                range: true,
                values: [10, 42]
            });




        });
    </script>
</head>
<body>
    <label id="lblText">
        This is jquery UI slider</label>
    <div id="slider">
    </div>
</body>
</html>
 
Share this answer
 
Comments
ravi1989h 19-Apr-13 8:05am    
When i copy this code and make html . slider is not display..:(

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900