Click here to Skip to main content
13,044,543 members (59,934 online)
Rate this:
Please Sign up or sign in to vote.
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 19-Apr-13 0:37am
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:
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
ryanb31 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 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
Top Experts
Last 24hrsThis month

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