Input Range Slider with Color Indicator

The HTML input type range lets us specify a numeric value which falls within a min and max value. For some use cases, we want to style the control in such a way that provides a visual feedback that is related to the selected value.  In our example, we can create a slider control that maps to three different system statuses:

Status	Control Value	Background Color
Down	1	Red
Idle	2	Gray
Running	3	Green

We want to be able to change the background color of the thumb control to match the slider value. In order to do this, we first need to create the base CSS classes to style the control. We are also creating some thumb classes with the corresponding background color.

.slidecontainer {         width: 100%;     }     .slider {         -webkit-appearance: none;         width: 100%;         height: 30px;         border-radius: 5px;         background: #d3d3d3;         outline: none;         opacity: 0.7;         -webkit-transition: .2s;         transition: opacity .2s;     }         .slider:hover {             opacity: 1;         }         .slider::-webkit-slider-thumb {             -webkit-appearance: none;             appearance: none;             width: 50px;             height: 50px;             border-radius: 50%;             background: gray;             cursor: pointer;         }     .thumb1::-webkit-slider-thumb {         background: red;     }     .thumb2::-webkit-slider-thumb {         background: gray;     }     .thumb3::-webkit-slider-thumb {         background: green;     }

Now that we have styled our control, we want to map the selected slider value to a CSS class that we defined. We can do this by using the range control oninput event which fires when the value changes.

var slider = document.getElementById("myRange");     var output = document.getElementById("demo"); CodeProject     var thumb = {"1":"thumb1","2":"thumb2","3":"thumb3"};     output.innerHTML = thumb[slider.value];     slider.oninput = function() {       output.innerHTML =thumb[this.value];       slider.className = 'slider ' + thumb[this.value];     }

In the code, we define a hash table with the possible slider values as keys. This enables us to quickly resolve the class name for the current value. When the value changes, we set the range controller class name to the slider base class plus the thumb class which provides the button background color.

With this article, we are able to show how easy it is to style the range input control to make it provide better visual feedback to the end users.

Originally published by ozkary.com

The HTML input type range lets us specify a numeric value which falls within a min and max value. For some use cases, we want to style the ...

Read Article →

Format Currency with JavaScript and CSS

When working with currency, there is a need to format the data with commas, decimals, currency sign and an indicator for negative amounts. Let’s take a look at one approach that can help us format the data once it is rendered on the user interface.

We start by taking a look at a page that displays several numeric fields with no styles.

As we can see, these numbers are hard to read. It will be much better to just add commas and a different font for negative values. We can do this by using a CSS selector and select all the elements that we want to format.

$('* div').each(function () {   

    var item = $(this).text();

    var num = Number(item).toLocaleString('en');

    if (Number(item) < 0) {

        num = num.replace('-', '');

        $(this).addClass('negMoney');

    } else {

        $(this).addClass('enMoney');

    }

    $(this).text(num);

});

The approach here is to use the Number.toLocaleString function to format the data with commas. This provides the ability to eliminate the use of regular expression to parse the data. Now we need to add the currency sign and use a red font for negative amounts. We do this by applying these CSS classes.

.enMoney::before {

    content:"$";

}

.negMoney {

    color:red;

}

div.negMoney::before {

    content:'($';

}

div.negMoney::after {

    content:')';

}

The script adds the class name to the element. We use the enMoney and negMoney classes to provide the font style. To add the currency sign and parentheses (negative values only), we use the CSS pseudo-element ::before and ::after to apply the special currency format.  The result looks like this:

This looks much better now, and it is a simple approach that uses the browser capabilities, JavaScript and some CSS to get the formatting done.

Use this JSFiddle to play with the script: Format Currency

When working with currency, there is a need to format the data with commas, decimals, currency sign and an indicator for negative amounts. L...

Read Article →