{"id":8,"date":"2019-03-04T19:36:17","date_gmt":"2019-03-04T17:36:17","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=8"},"modified":"2020-01-14T10:21:35","modified_gmt":"2020-01-14T08:21:35","slug":"volume-controller-slider","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/volume-controller-slider\/","title":{"rendered":"Volume Controller Slider"},"content":{"rendered":"<p>This is a very lightweight volume slider controller using <a href=\"https:\/\/html-css-js.com\/\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">HTML, CSS and JavaScript<\/a>.<\/p>\n<p>The most simple way of doing this is adding a range input slider:<br \/>\n<input type=\"range\" min=\"1\" max=\"10\" value=\"5\" id=\"myNumber\"><\/p>\n<pre style=\"color:#000000;background:#ffffff;\"><span style=\"color:#a65700; \">&lt;<\/span><span style=\"color:#800000; font-weight:bold; \">input<\/span><span style=\"color:#274796; \"> <\/span><span style=\"color:#074726; \">type<\/span><span style=\"color:#808030; \">=<\/span><span style=\"color:#0000e6; \">\"range\"<\/span><span style=\"color:#274796; \"> <\/span><span style=\"color:#074726; \">min<\/span><span style=\"color:#808030; \">=<\/span><span style=\"color:#0000e6; \">\"1\"<\/span><span style=\"color:#274796; \"> <\/span><span style=\"color:#074726; \">max<\/span><span style=\"color:#808030; \">=<\/span><span style=\"color:#0000e6; \">\"10\"<\/span><span style=\"color:#274796; \"> <\/span><span style=\"color:#074726; \">value<\/span><span style=\"color:#808030; \">=<\/span><span style=\"color:#0000e6; \">\"5\"<\/span><span style=\"color:#274796; \"> <\/span><span style=\"color:#074726; \">id<\/span><span style=\"color:#808030; \">=<\/span><span style=\"color:#0000e6; \">\"myNumber\"<\/span><span style=\"color:#a65700; \">&gt;<\/span>\n<\/pre>\n<p>Here&#8217;s a fancier solution. The visual control lets you change a JavaScript variable with a mouse click.<br \/>\n<strong>To try it simply click one of the bars below:<\/strong><\/p>\n<p><iframe loading=\"lazy\" style=\"margin-top: 25px; width: 200px; margin: auto; overflow: hidden;\" src=\"\/demo\/volume-slider\/index.html\" width=\"300\" height=\"60\" scrolling=\"no\"><\/iframe><\/p>\n<p><!--more--><\/p>\n<h2>Here&#8217;s what you get with the volume slider script package<\/h2>\n<p>Place the code below in the HTML source of your page where you want your slider to render and call the initializer function. You can do this using the body onload event as in our example:<\/p>\n<pre style=\"color: #000000; background: #EEEEEE; padding: 5px; border: 1px solid #AAA;\"><span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">body<\/span> <span style=\"color: #074726;\">onload<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"drawvolumecontroller(20,35,8);\"<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n<\/pre>\n<p>And where you want your slider to appear on the page:<\/p>\n<pre style=\"color: #000000; background: #EEEEEE; padding: 5px; border: 1px solid #AAA;\"><span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">div<\/span> <span style=\"color: #074726;\">id<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"volumcontroller\"<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: #800000; font-weight: bold;\">div<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">div<\/span> <span style=\"color: #074726;\">id<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"volumeindicator\"<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n    <span style=\"color: #008c00;\">8<\/span>\n<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: #800000; font-weight: bold;\">div<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n<\/pre>\n<p>The attached CSS contains just a minimalistic design, you can adjust this to match your styles:<\/p>\n<pre style=\"color: #000000; background: #EEEEEE; padding: 5px; border: 1px solid #AAA;\"><span style=\"color: #808030;\">#<\/span>volumcontroller <span style=\"color: #800080;\">{<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">height<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">35<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">width<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">90<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n<span style=\"color: #800080;\">}<\/span>\n<span style=\"color: #808030;\">#<\/span>volumcontroller <span style=\"color: #800000; font-weight: bold;\">div<\/span><span style=\"color: #800080;\">{<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">height<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">40<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n<span style=\"color: #800080;\">}<\/span>\n<span style=\"color: #808030;\">.<\/span>volumecontrollerbar<span style=\"color: #800080;\">{<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">border-left<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">1<\/span><span style=\"color: #006600;\">px<\/span> <span style=\"color: #074726;\">solid<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: #008000;\">222<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">float<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #074726;\">right<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">width<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n    -webkit-border-top-left-radius<span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">3<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #008484;\">-moz-border-radius-topleft<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">3<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n    border-top-left-radius<span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">3<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">background-color<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: #008000;\">4c4c4c<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">cursor<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #074726;\">pointer<\/span><span style=\"color: #800080;\">;<\/span>\n<span style=\"color: #800080;\">}<\/span>\n<span style=\"color: #808030;\">.<\/span>volumecontrollerbar<span style=\"color: #800080;\">:<\/span><span style=\"color: #800000; font-weight: bold;\">hover<\/span><span style=\"color: #800080;\">{<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">background-color<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">#<\/span><span style=\"color: #008000;\">bcbcbc<\/span> <span style=\"color: #800000; font-weight: bold;\">!important<\/span><span style=\"color: #800080;\">;<\/span>\n<span style=\"color: #800080;\">}<\/span>\n<\/pre>\n<p>The javascript is just 20 lines long, you can find comments in the zip file offered for download at the bottom of this page.<\/p>\n<pre style=\"color: #000000; background: #EEEEEE; padding: 5px; border: 1px solid #AAA;\"><span style=\"color: #696969;\">\/\/length: how many bars<\/span>\n<span style=\"color: #696969;\">\/\/height: height of the tallest bar<\/span>\n<span style=\"color: #696969;\">\/\/nowselected: which bar is selected<\/span>\n<span style=\"color: #800000; font-weight: bold;\">function<\/span> drawvolumecontroller<span style=\"color: #808030;\">(<\/span>length<span style=\"color: #808030;\">,<\/span>height<span style=\"color: #808030;\">,<\/span>nowselected<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">{<\/span>    \n    document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">volumcontroller<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>innerHTML <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #800000; font-weight: bold;\">for<\/span> <span style=\"color: #808030;\">(<\/span>i<span style=\"color: #808030;\">=<\/span><span style=\"color: #008c00;\">0<\/span><span style=\"color: #800080;\">;<\/span>i<span style=\"color: #808030;\">&lt;<\/span>length<span style=\"color: #800080;\">;<\/span>i<span style=\"color: #808030;\">++<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">{<\/span>\n        magassag <span style=\"color: #808030;\">=<\/span> <span style=\"color: #008c00;\">7<\/span> <span style=\"color: #808030;\">+<\/span> <span style=\"color: #797997;\">Math<\/span><span style=\"color: #808030;\">.<\/span><span style=\"color: #800000; font-weight: bold;\">round<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #008000;\">1.4<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">*<\/span><span style=\"color: #808030;\">(<\/span>length <span style=\"color: #808030;\">-<\/span> i<span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span> \n        margintop <span style=\"color: #808030;\">=<\/span> height<span style=\"color: #808030;\">-<\/span>magassag<span style=\"color: #800080;\">;<\/span>\n        <span style=\"color: #800000; font-weight: bold;\">if<\/span> <span style=\"color: #808030;\">(<\/span>margintop <span style=\"color: #808030;\">&lt;=<\/span> <span style=\"color: #008c00;\">0<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: #800080;\">{<\/span>margintop<span style=\"color: #808030;\">=<\/span><span style=\"color: #008c00;\">0<\/span><span style=\"color: #800080;\">;<\/span><span style=\"color: #800080;\">}<\/span>\n        <span style=\"color: #800000; font-weight: bold;\">if<\/span> <span style=\"color: #808030;\">(<\/span>i <span style=\"color: #808030;\">&gt;=<\/span> nowselected<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">{<\/span>        \n            document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">volumcontroller<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>innerHTML <span style=\"color: #808030;\">=<\/span> \n            document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">volumcontroller<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>innerHTML <span style=\"color: #808030;\">+<\/span> \n            <span style=\"color: #0000e6;\">'&lt;div  onmouseup=\"volumecontrolchanged('<\/span> <span style=\"color: #808030;\">+<\/span> i <span style=\"color: #808030;\">+<\/span> \n            <span style=\"color: #0000e6;\">')\" style=\"background-color:#898989;height:'<\/span> <span style=\"color: #808030;\">+<\/span> magassag <span style=\"color: #808030;\">+<\/span> \n            <span style=\"color: #0000e6;\">'px;margin-top:'<\/span><span style=\"color: #808030;\">+<\/span>margintop<span style=\"color: #808030;\">+<\/span><span style=\"color: #0000e6;\">'px;\" class=\"volumecontrollerbar\"&gt;&lt;\/div&gt;'<\/span><span style=\"color: #800080;\">;<\/span>\n        <span style=\"color: #800080;\">}<\/span> <span style=\"color: #800000; font-weight: bold;\">else<\/span> <span style=\"color: #800080;\">{<\/span>\n            document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">volumcontroller<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>innerHTML <span style=\"color: #808030;\">=<\/span> \n            document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">volumcontroller<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>innerHTML <span style=\"color: #808030;\">+<\/span> \n            <span style=\"color: #0000e6;\">'&lt;div  onmouseup=\"volumecontrolchanged('<\/span> <span style=\"color: #808030;\">+<\/span> i <span style=\"color: #808030;\">+<\/span> \n            <span style=\"color: #0000e6;\">')\" style=\"height:'<\/span><span style=\"color: #808030;\">+<\/span>magassag<span style=\"color: #808030;\">+<\/span><span style=\"color: #0000e6;\">'px;margin-top:'<\/span> <span style=\"color: #808030;\">+<\/span> margintop <span style=\"color: #808030;\">+<\/span> \n            <span style=\"color: #0000e6;\">'px;\"class=\"volumecontrollerbar\"&gt;&lt;\/div&gt;'<\/span><span style=\"color: #800080;\">;<\/span>\n        <span style=\"color: #800080;\">}<\/span>        \n    <span style=\"color: #800080;\">}<\/span>    \n<span style=\"color: #800080;\">}<\/span>\n<span style=\"color: #800000; font-weight: bold;\">function<\/span> volumecontrolchanged<span style=\"color: #808030;\">(<\/span>newvolume<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">{<\/span>\n    drawvolumecontroller<span style=\"color: #808030;\">(<\/span><span style=\"color: #008c00;\">20<\/span><span style=\"color: #808030;\">,<\/span><span style=\"color: #008c00;\">35<\/span><span style=\"color: #808030;\">,<\/span>newvolume<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n    document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">volumeindicator<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>innerHTML <span style=\"color: #808030;\">=<\/span> newvolume<span style=\"color: #800080;\">;<\/span>\n<span style=\"color: #800080;\">}<\/span>\n<\/pre>\n<p><strong>The code snippets might have incorrect characters, please download the zip file to use the JavaScript volume controller slider.<\/strong><\/p>\n<p><a href=\"\/downloads\/volume-controller-script.zip\"><strong>Download .ZIP package<\/strong><\/a><br \/>\nHave fun! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a very lightweight volume slider controller using HTML, CSS and JavaScript. The most simple way of doing this is adding a range input slider: &lt;input type=&#8221;range&#8221; min=&#8221;1&#8243; max=&#8221;10&#8243; value=&#8221;5&#8243; id=&#8221;myNumber&#8221;&gt; Here&#8217;s a fancier solution. The visual control lets you change a JavaScript variable with a mouse click. To try it simply click one &hellip; <a href=\"https:\/\/html-online.com\/articles\/volume-controller-slider\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Volume Controller Slider&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4,5],"tags":[],"class_list":["post-8","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Volume Controller Slider - HTML5 CSS3 JavaScirpt<\/title>\n<meta name=\"description\" content=\"A very lightweight volume slider controller using HTML, CSS and JavaScript. The visual control lets you change a JavaScript variable with a mouse click.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/volume-controller-slider\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Volume Controller Slider - HTML5 CSS3 JavaScirpt\" \/>\n<meta property=\"og:description\" content=\"A very lightweight volume slider controller using HTML, CSS and JavaScript. The visual control lets you change a JavaScript variable with a mouse click.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/volume-controller-slider\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-04T17:36:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-14T08:21:35+00:00\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/volume-controller-slider\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/volume-controller-slider\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Volume Controller Slider\",\"datePublished\":\"2019-03-04T17:36:17+00:00\",\"dateModified\":\"2020-01-14T08:21:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/volume-controller-slider\/\"},\"wordCount\":178,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"articleSection\":[\"CSS\",\"HTML\",\"JavaScript\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/html-online.com\/articles\/volume-controller-slider\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/volume-controller-slider\/\",\"url\":\"https:\/\/html-online.com\/articles\/volume-controller-slider\/\",\"name\":\"Volume Controller Slider - HTML5 CSS3 JavaScirpt\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"datePublished\":\"2019-03-04T17:36:17+00:00\",\"dateModified\":\"2020-01-14T08:21:35+00:00\",\"description\":\"A very lightweight volume slider controller using HTML, CSS and JavaScript. The visual control lets you change a JavaScript variable with a mouse click.\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/volume-controller-slider\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/volume-controller-slider\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/volume-controller-slider\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Volume Controller Slider\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Volume Controller Slider - HTML5 CSS3 JavaScirpt","description":"A very lightweight volume slider controller using HTML, CSS and JavaScript. The visual control lets you change a JavaScript variable with a mouse click.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/volume-controller-slider\/","og_locale":"en_GB","og_type":"article","og_title":"Volume Controller Slider - HTML5 CSS3 JavaScirpt","og_description":"A very lightweight volume slider controller using HTML, CSS and JavaScript. The visual control lets you change a JavaScript variable with a mouse click.","og_url":"https:\/\/html-online.com\/articles\/volume-controller-slider\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2019-03-04T17:36:17+00:00","article_modified_time":"2020-01-14T08:21:35+00:00","author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/volume-controller-slider\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/volume-controller-slider\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Volume Controller Slider","datePublished":"2019-03-04T17:36:17+00:00","dateModified":"2020-01-14T08:21:35+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/volume-controller-slider\/"},"wordCount":178,"commentCount":0,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"articleSection":["CSS","HTML","JavaScript"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/html-online.com\/articles\/volume-controller-slider\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/volume-controller-slider\/","url":"https:\/\/html-online.com\/articles\/volume-controller-slider\/","name":"Volume Controller Slider - HTML5 CSS3 JavaScirpt","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"datePublished":"2019-03-04T17:36:17+00:00","dateModified":"2020-01-14T08:21:35+00:00","description":"A very lightweight volume slider controller using HTML, CSS and JavaScript. The visual control lets you change a JavaScript variable with a mouse click.","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/volume-controller-slider\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/volume-controller-slider\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/volume-controller-slider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Volume Controller Slider"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/8\/revisions"}],"predecessor-version":[{"id":1133,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/8\/revisions\/1133"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}