Click here to Skip to main content
Rate this: bad
good
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
Comments
   
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: http://jqueryui.com/demos/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
good
Please Sign up or sign in to vote.

Solution 1

<!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>
  Permalink  
Comments
ravi1989h at 19-Apr-13 8:05am
   
When i copy this code and make html . slider is not display..:(
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

The solution is quite simple
 
Just get jQuery and jQuery ui
 
<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
<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} );
      }
    });
  Permalink  
v5

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

  Print Answers RSS
0 OriginalGriff 280
1 Jochen Arndt 150
2 Kornfeld Eliyahu Peter 120
3 PIEBALDconsult 110
4 Richard MacCutchan 105
0 OriginalGriff 6,055
1 DamithSL 4,621
2 Maciej Los 4,087
3 Kornfeld Eliyahu Peter 3,500
4 Sergey Alexandrovich Kryukov 3,294


Advertise | Privacy | Mobile
Web01 | 2.8.141220.1 | Last Updated 19 Apr 2013
Copyright © CodeProject, 1999-2014
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