javascript - Font size increase and contrast/Brightness,sound control of website using jquery -

hi client have new requirement, need add font size increase , contrast/brightness,sound control in website.

so on clicking of image slider appear , can corresponding action .

how can using jquery ?.at first , when clicking of control images need appear "+" ," - " slider second image.please .

here small demo you: http://jsfiddle.net/gcu2d/692/

html:

<div>     <ul>         <li><a>font</a>              <div id="font" class="checked" data-min="8" data-max="100" data-step="1"></div>         </li>         <li><a>brightness</a>              <div id="brightness" class="checked" data-min="0" data-max="2" data-step="0.1"></div>         </li>         <li><a>contrast</a>              <div id="contrast" class="checked" data-min="8" data-max="100" data-step="1"></div>         </li>     </ul> </div> <div class="demo">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. long established fact reader distracted readable content of page when looking @ layout. point of using lorem ipsum has more-or-less normal distribution of letters, opposed using 'content here, content here', making readable english. many desktop publishing packages , web page editors use lorem ipsum default model text, , search 'lorem ipsum' uncover many web sites still in infancy. various versions have evolved on years, accident, on purpose (injected humour , like). contrary popular belief, lorem ipsum not random text. has roots in piece of classical latin literature 45 bc, making on 2000 years old. richard mcclintock, latin professor @ hampden-sydney college in virginia, looked 1 of more obscure latin words, consectetur, lorem ipsum passage, , going through cites of word in classical literature, discovered undoubtable source. lorem ipsum comes sections 1.10.32 , 1.10.33 of "de finibus bonorum et malorum" (the extremes of , evil) cicero, written in 45 bc. book treatise on theory of ethics, popular during renaissance. first line of lorem ipsum, "lorem ipsum dolor sit amet..", comes line in section 1.10.32. standard chunk of lorem ipsum used since 1500s reproduced below interested. sections 1.10.32 , 1.10.33 "de finibus bonorum et malorum" cicero reproduced in exact original form, accompanied english versions 1914 translation h. rackham. there many variations of passages of lorem ipsum available, majority have suffered alteration in form, injected humour, or randomised words don't believable. if going use passage of lorem ipsum, need sure there isn't embarrassing hidden in middle of text. lorem ipsum generators on internet tend repeat predefined chunks necessary, making first true generator on internet. uses dictionary of on 200 latin words, combined handful of model sentence structures, generate lorem ipsum looks reasonable. generated lore</div> 

css:

ul {     margin:0;     padding:0;     list-style-type:none;     white-space:nowrap } ul li {     display:inline-block;     width:100px;     padding:5px;     font-size:12px;     color:#000;     position:relative } ul li .checked {     position:absolute;     top:100%;     display:none;     left:0; } ul li {     display:block; } .demo {     margin-top:100px;     color:#000;     border:1px solid #bfbfbf } 

js:

$(document).ready(function () {     $("ul").on("click", "a", function () {         $(this).next(".checked").toggle();     });     $(".checked").each(function () {         $(this).slider({             orientation: "vertical",             min: 0,             step: parsefloat($(this).attr("data-step")),             max: parseint($(this).attr("data-max")),             slide: function (event, ui) {                 var value = ui.value;                 var type = $(this).attr("id");                 console.log(type)                 switch (type) {                     case "font":                         {                             $(".demo").css("font-size", value + "px");                             break;                         }                     case "brightness":                         {                             console.log(value);                             $(".demo").css("background-color", "rgba(0,0,0," + value + ")");                             break;                         }                     case "contrast":                         {                             //your code                             break;                         }                 }             }          });     }) }); 

resource links: http://api.jqueryui.com/slider/#event-slide

should start. click on font/brightness/contrast, slider appear , can set values.