{"id":11035,"date":"2022-09-25T22:09:18","date_gmt":"2022-09-25T16:39:18","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/"},"modified":"2022-09-25T22:09:18","modified_gmt":"2022-09-25T16:39:18","slug":"solved-set-background-color-to-value-of-range-input-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/","title":{"rendered":"[Solved] Set background color to value of range input [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

What you want to do is add an onchange part to your inputs to handle when the user changes the values of your input sliders. This is what it would look like:<\/p>\n

<input id=\"red\" name=\"red\" type=\"range\" min=\"0\" max=\"255\" step=\"1\" value=\"128\" onchange=\"changeColor()\"><\/input>\n<label for=\"red\">red<\/label>\n<br>\n<input id=\"green\" name=\"green\" type=\"range\" min=\"0\" max=\"255\" step=\"1\" value=\"128\" onchange=\"changeColor()\"><\/input>\n<label for=\"green\">green<\/label>\n<br>\n<input id=\"blue\" name=\"blue\" type=\"range\" min=\"0\" max=\"255\" step=\"1\" value=\"128\" onchange=\"changeColor()\"><\/input>\n<label for=\"blue\">blue<\/label>\n<\/code><\/pre>\n
Now you want to make a function that will actually change the background color:<\/p>\n
function changeColor(){\n    var red = document.getElementById(\"red\").value;\n    var green = document.getElementById(\"green\").value;\n    var blue = document.getElementById(\"blue\").value;\n    document.body.style.background = \"rgb(\" + red + \",\" + green + \",\" + blue + \")\";\n}\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Set background color to value of range input [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] What you want to do is add an onchange part to your inputs to handle when the user changes the values of your input sliders. This is what it would look like: <input id=”red” name=”red” type=”range” min=”0″ max=”255″ step=”1″ value=”128″ onchange=”changeColor()”><\/input> <label for=”red”>red<\/label> <br> <input id=”green” name=”green” type=”range” min=”0″ max=”255″ step=”1″ value=”128″ onchange=”changeColor()”><\/input> <label … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[385,1310,333,1671,2410],"class_list":["post-11035","post","type-post","status-publish","format-standard","hentry","category-solved","tag-background-color","tag-colors","tag-javascript","tag-range","tag-rgb"],"yoast_head":"\n[Solved] Set background color to value of range input [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Set background color to value of range input [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] What you want to do is add an onchange part to your inputs to handle when the user changes the values of your input sliders. This is what it would look like: <input id="red" name="red" type="range" min="0" max="255" step="1" value="128" onchange="changeColor()"><\/input> <label for="red">red<\/label> <br> <input id="green" name="green" type="range" min="0" max="255" step="1" value="128" onchange="changeColor()"><\/input> <label ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-25T16:39:18+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Set background color to value of range input [closed]\",\"datePublished\":\"2022-09-25T16:39:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/\"},\"wordCount\":68,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"background-color\",\"colors\",\"javascript\",\"range\",\"rgb\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/\",\"name\":\"[Solved] Set background color to value of range input [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-25T16:39:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Set background color to value of range input [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Set background color to value of range input [closed] - JassWeb","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:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Set background color to value of range input [closed] - JassWeb","og_description":"[ad_1] What you want to do is add an onchange part to your inputs to handle when the user changes the values of your input sliders. This is what it would look like: <input id=\"red\" name=\"red\" type=\"range\" min=\"0\" max=\"255\" step=\"1\" value=\"128\" onchange=\"changeColor()\"><\/input> <label for=\"red\">red<\/label> <br> <input id=\"green\" name=\"green\" type=\"range\" min=\"0\" max=\"255\" step=\"1\" value=\"128\" onchange=\"changeColor()\"><\/input> <label ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/","og_site_name":"JassWeb","article_published_time":"2022-09-25T16:39:18+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Set background color to value of range input [closed]","datePublished":"2022-09-25T16:39:18+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/"},"wordCount":68,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["background-color","colors","javascript","range","rgb"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/","name":"[Solved] Set background color to value of range input [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-25T16:39:18+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-set-background-color-to-value-of-range-input-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Set background color to value of range input [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/11035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=11035"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/11035\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=11035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=11035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=11035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}