• 0

CSS Range Control: Color thumb diff for each


Go to solution Solved by SinsOfCube,

Question

James Rose

Hello gang,

 

I need to be able to have a few Range controls, and each one needs to have it's thumb a different color.  I have just spent a good chunk of time on Codepen, etc attempting to find an answer.

 

This css works for all Range controls...  but obviously I need to have a separate class for each... what dumb@$$ thing am I missing?

 

The image shows what I am attempting to accomplish.

 

Thanks.

input[type='range']::-moz-range-thumb {
	 -moz-appearance: none;
	 border-radius: 20px;
	 background-color: #FFF;
	 box-shadow:
		inset 0 0 16px #B2B200,
		inset 16px 0 20px #FFFF33;
	 border: 2px solid #292908;
	 height: 20px;
	 width: 20px;
}

post-45653-0-04002400-1400518338.png

Link to post
Share on other sites

11 answers to this question

Recommended Posts

  • 0
SinsOfCube

Just use a class to define the thumb attributes and seperate classes for the colours and give the range input elements the colourclass.

input[type='range']::-moz-range-thumb {
     -moz-appearance: none;
     border-radius: 20px;
     background-color: #FFF;
     border: 2px solid #292908;
     height: 20px;
     width: 20px;
}
input[type='range'].yellow::-moz-range-thumb {
     box-shadow:
          inset 0 0 16px #B2B200,
          inset 16px 0 20px #FFFF33;
}
input[type='range'].red::-moz-range-thumb {
     box-shadow:
          inset 0 0 16px #FF0000,
          inset 16px 0 20px #FFFF33;
}
<input type="range" class="yellow"/>
<input type="range" class="red"/>

etc.

Link to post
Share on other sites
  • 0
winlonghorn

 

Hello gang,

 

I need to be able to have a few Range controls, and each one needs to have it's thumb a different color.  I have just spent a good chunk of time on Codepen, etc attempting to find an answer.

 

This css works for all Range controls...  but obviously I need to have a separate class for each... what dumb@$$ thing am I missing?

 

The image shows what I am attempting to accomplish.

 

Thanks.

input[type='range']::-moz-range-thumb {
	 -moz-appearance: none;
	 border-radius: 20px;
	 background-color: #FFF;
	 box-shadow:
		inset 0 0 16px #B2B200,
		inset 16px 0 20px #FFFF33;
	 border: 2px solid #292908;
	 height: 20px;
	 width: 20px;
}

 

try input[type=range]::-moz-slider-thumb instead of input[type=range]::-moz-range-thumb. 

Link to post
Share on other sites
  • 0
James Rose

Thanks, but that won't change the fact that I need multiple classes to change the thumb color so that each Range can have their own color.  The code I gave works... but it makes all Range objects have the same color.

 

or am I missing the point you are giving?

Link to post
Share on other sites
  • 0
winlonghorn

Thanks, but that won't change the fact that I need multiple classes to change the thumb color so that each Range can have their own color.  The code I gave works... but it makes all Range objects have the same color.

 

or am I missing the point you are giving?

 

No problem! I apologize. I misunderstood what you were trying to achieve. I will look a bit deeper and see if I can't find an answer for you. :)

 

EDIT: I have a quick question. Why try and avoid using multiple classes in this instance? One thing you could do if you don't want to use multiple classes is use ids instead. CSS ids are designed to be used for unique element styling (giving different elements their own unique styling). CSS classes are designed for when you want to use the same styling across multiple elements. 

Link to post
Share on other sites
  • 0
James Rose

EDIT: I have a quick question. Why try and avoid using multiple classes in this instance? One thing you could do if you don't want to use multiple classes is use ids instead. CSS ids are designed to be used for unique element styling (giving different elements their own unique styling). CSS classes are designed for when you want to use the same styling across multiple elements. 

 

I'm open to all ideas, it does not have to be separate classes

Link to post
Share on other sites
  • 0
James Rose

SinsofCube,

 

THANK YOU!  That is exactly what I needed.

 

Have a great day.

Link to post
Share on other sites
  • 0
winlonghorn

I apologize that I wasn't able to be of more help!

Link to post
Share on other sites
  • 0
James Rose

I apologize that I wasn't able to be of more help!

 

No, thank you very much for attempting.  I didn't know the answer, so thank you for taking your time.   Have a great evening

Link to post
Share on other sites
  • 0
winlonghorn

No, thank you very much for attempting.  I didn't know the answer, so thank you for taking your time.   Have a great evening

 

You are very welcome! I understand how it is to search for an answer for what seems like forever and feel completely lost. Therefore, I wanted to at least try and provide an answer because nobody had been able to answer up to that point. :)

Link to post
Share on other sites
  • 0
James Rose

You are very welcome! I understand how it is to search for an answer for what seems like forever and feel completely lost. Therefore, I wanted to at least try and provide an answer because nobody had been able to answer up to that point. :)

 

Indeed.  I have been a professional developer for 20 years, and there is always something we need to learn.   There is simply too much for one person to know...  so we all try to help each other.   It is one of the nice things about being in tech.

Link to post
Share on other sites
  • 0
winlonghorn

Indeed.  I have been a professional developer for 20 years, and there is always something we need to learn.   There is simply too much for one person to know...  so we all try to help each other.   It is one of the nice things about being in tech.

 

I definitely cannot argue about that. :) It is nice to know that there are people there to assist if you get stuck. Thank you! 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Save 98% off this 2020 Ultimate Web Developer & Design Bootcamp Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off this 2020 Ultimate Web Developer & Design Bootcamp Bundle. Kick off your career as an expert web developer & designer with 69+ hours of content on Java, HTML, CSS3, APIs, and more.



      What's the deal?
      This deal consists of the following courses:

      The Complete 2020 HTML5 CSS3 Course with Flexbox, Grid & SASS
      Acquire Fundamental Skills You Need to Become One of the Most Sought-After Web Developers Modern Web Design Complete HTML & CSS
      Learn HTML, CSS, & JavaScript and Create Web Pages from Scratch The Ultimate HTML Developer
      Learn HTML/HTML5 & Put Your Skills Into Practice by Creating an Entire Web Page Build Responsive Real-World Websites with CSS3 v2.0
      Learn CSS3 Flexbox, Animations, Transitions, Transformations & Responsive Design Create an 8-Bit Website
      Create an 8-Bit Style Website from Scratch with Just HTML & Some Basic CSS Understanding APIs & RESTful APIs Crash Course
      An Introduction on How APIs & RESTful APIs Work — No Coding Involved JavaScript for Beginners: Learn with 6 Main Projects
      Everything You Need to Become a Confident JavaScript Developer Git Essentials: The Step-by-Step Guide to Git & GitHub Mastery
      Master the Daily Git Workflow That Every Developer Uses JavaScript Essentials
      The Basis of JavaScript Including Programming Fundamentals You Can Use in Vue.js, React.js & Node.js Python for Everybody: The Ultimate Python 3 Bootcamp
      Learn Python from A to Z & Become a Ninja Python Coder Web Design JavaScript Front-End Code Course
      Explore How to Write JavaScript Code to Create Interactive & Dynamic Web Pages Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This 2020 Ultimate Web Developer & Design Bootcamp Bundle normally costs* $2,200, but you can pick it up for just $39.99 for a limited time - that represents a saving of $2,160.01 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 70% off Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Save 95% off this Complete IT for Beginners Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can save 95% off* this Complete IT for Beginners Bundle. Kick off your IT career with 10 courses on coding, web development, programming and more.



      What's the deal?
      This deal consists of the following courses:

      Coding for Beginners Certificate
      Learn Object-Oriented Programming & Run Your First Lines of Actual Code IT Level 2 Certificate
      Improve Productivity Working with Spreadsheets, Word Processing & Presentation Software Introduction to Cloud Computing Certificate Course
      Understand Cloud Services & Improve Your Company's Functionality Introduction to Amazon Web Services Certificate
      How Amazon Web Services Work, What They Offer & How They Can Benefit You Level 1 Python Certificate
      Code with Greater Uniformity & More Simplicity Using Python Programming Language Level 2 HTML5 Certificate
      Practice HTML Coding & Create Functional, Efficient Webpages Level 1 HTML & CSS Certificate
      Start Developing Your Own Apps by Learning HTML5 & CSS Level 1 Programming Certificate
      Take an In-Depth Look at Computer Programming & Prepare for a Career in Web Development Web Applications for Beginners Certificate
      Get Equipped with the Knowledge & Tools to Build Your First Web Application Intro to Gaining a Cisco Certificate
      Begin Your IT Journey by Preparing for the Sought-After Cisco Certification Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This Complete IT for Beginners Bundle normally costs* $971, but you can pick it up for just $39.99 for a limited time - that represents a saving of $931.01 (95%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      No, your privacy was not breached at NordVPN (see why).

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software for Private Internet Access and NordVPN deals.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.

    • By News Staff
      Save 98% off this Complete 2020 Learn to Design Certification Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off* this Complete 2020 Learn to Design Certification Bundle. Take your web design and development skills to the next level with 10 courses on JavaScript, HTML5, Photoshop and more!



      What's the deal?
      This deal consists of the following courses:

      Adobe CC Masterclass: Photoshop, Illustrator, Adobe XD & InDesign
      Learn Graphic Design Essentials with Photoshop, Illustrator, Adobe XD, InDesign & More JavaScript Beginner Bootcamp
      Understand the JavaScript Language & Learn to Create and Launch Interactive Webpages Photoshop Master: From Beginner to Photoshop Pro
      Become an Expert in Photoshop with No Experience or Prior Knowledge Adobe Photoshop CC: Advanced Training
      Learn Professional Workflows & Shortcuts to Save Hours Using Photoshop HTML5 Canvas: The Ultimate Beginner's Guide
      Make Drawings, Animations, Web Applications & Games with HTML5 Canvas by Using JavaScript Intro to CSS: Learn CSS3 Selectors, Cascade, Specificity & CSS Basics
      Understand the Fundamental Topics of CSS & Become a Well-Rounded Web Developer The Ultimate JavaScript Console Object Guide
      Enhance Your JavaScript Skills by Discovering the Power of JavaScript Console Object Logo Design Mastery In Adobe Illustrator
      Learn Logo Design Theory, How to Work With Clients & Master Adobe Illustrator Tools The Best Selling Graphic Design Masterclass: Learn Great Design
      Design Course, Covering Photoshop, Illustrator, InDesign, Design Theory, Branding & More Create Images, Videos And Web Pages Using Adobe Spark
      Use Adobe Spark to Create Amazing Videos, Presentation & Social Media Posts Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This Complete 2020 Learn to Design Certification Bundle normally costs* $2,000, but you can pick it up for just $39 for a limited time - that represents a saving of $1,961 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software for Private Internet Access and NordVPN deals.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.

    • By zikalify
      KaiOS Developer Portal launches to help programmers create apps for the platform
      by Paul Hill

      KaiOS Technologies has announced the official launch of the KaiOS Developer Portal which aims to help developers get started building apps on the KaiOS mobile platform. If you’ve never heard of KaiOS, it’s the successor to Firefox OS which was quite revolutionary in that it was built using only web technologies. KaiOS also uses web technologies such as HTML, CSS, and JavaScript, and all of the available apps are written in these languages too.

      With the launch of the KaiOS Developer Portal, developers new to the platform have all of the tools they need to begin building and distributing apps for KaiOS. The guide can help you get a feel for things with sample code, there are instructions for setting up your development environment, and there’s an easy to set up simulator that lets you run your app virtually to ensure everything is working.

      Commenting on the news, Sebastien Codeville, CEO of KaiOS Technologies, said:

      While KaiOS is relatively unknown in developed markets, it’s a growing platform among first-time internet users in Asia, Africa, and Latin America, and is currently running more than 100 million devices worldwide. This makes it the third-largest mobile operating system in the world – according to the company, this figure is set to rise by another 50 million by the end of the year.

      Breaking into the mobile market is an incredibly difficult task due to Apple's and Google’s advantage in the sector. With that said, KaiOS Technologies believes that developers who write apps for its platform will be able to get first access to new customers as its platform is targeting untapped markets. With many developers already using web technologies to build their Android and iOS apps, porting them over to KaiOS doesn’t have to be too much of a chore.

      If you’re brand new to programming in HTML, CSS, or JavaScript, be sure to check out this list of resources which KaiOS Technologies has compiled making it easy to get started. If you're new to programming in general, HTML, CSS, and JavaScript are some of the easiest languages to pick up and deliver immediate results as they don't need to be compiled.

    • By M_Lyons10
      Good afternoon everyone!

      I am NOT strong with javascript at all, and was trying to do something today and having no luck whatsoever.
       
      I have drop down menus from the navigation on my site and one of them is getting too long (on desktop).  I wanted to, if the nav ul has more than 8 items in the list for it to show as two separate columns. 
       
      Here is the javascript from the navigation now:
       
                  $('#nav > ul').dropotron({
                      offsetY: -16,
                      mode: 'fade',
                      noOpenerFade: true,
                      hideDelay: 400
                  });
       
      I would assume that this would need to be done in the javascript since I attempted to edit the css and that did not work.  Just for clarity, here is the CSS:
       
        #nav {
          position: absolute;
          right: 2.5em;
          top: 0; }
          #nav ul li {
            float: left;
            margin-left: 1.5em;
            height: 7em;
            line-height: 7em; }
            #nav ul li a {
              color: #fff;
              -moz-transition: background-color .25s ease-in-out;
              -webkit-transition: background-color .25s ease-in-out;
              -ms-transition: background-color .25s ease-in-out;
              transition: background-color .25s ease-in-out;
              color: #ccc;
              text-decoration: none;
              text-transform: uppercase;
              font-weight: 700;
              padding: 0.55em 1.4em 0.55em 1.4em;
              border-radius: 6px;
              outline: 0; }
              #nav ul li a:hover {
                color: #fff; }
            #nav ul li.current_page_item a, #nav ul li.active a {
              background: #20242A;
              color: #fff; }
          #nav > ul > li > ul {
            display: none; }
       
      I'm open to suggestions as well.  I'm just trying to have the menu be a little easier to navigate.
       
      Thank you for your help!