Make slider more stylable, and dynamically stylable beased on current value

[nagey]

I had a use-case for making my slider themable based upon the current value of the slider (think changing the background color of the slider based on the input)

To that end, I created a "styler" function that gets passed in as an option, and returns an object of CSS rules. This is then compared against any styles that the slider code creates (allowing the styler to optionally override anything based on its class), and applies the combined style using element.css()

Here is an example styler function:

var styler = function (className, sliderValue) {
            /*jshint sub:true*/
            var style = { 'override': true };
            var handleDiameter = 60;
            var handleRadius = handleDiameter / 2;
            var leftMargin = ($scope.slider.width / 2) - (handleRadius);
            switch(className) {
                case 'l':
                case 'r':
                case 's':
                    style['display']            = 'none';
                    break;
                case 'pointer':
                    style['width']              = handleDiameter +'px';
                    style['height']             = handleDiameter +'px';
                    style['margin-top']         = '-'+handleRadius+'px';
                    style['border-radius']      = handleRadius+'px';
                    style['background-image']   = 'none';
                    style['background']         = '#aaa';
                    style['border']             = '6px solid #000';
                    style['margin-left']        = leftMargin+'px';
                    style['left']               = '0';
                    break;
                case 'value':
                    style['background']         = 'none';
                    style['z-index']            = '2';
                    style['margin-left']        = leftMargin+'px';
                    style['margin-top']         = '-7.5px';
                    style['width']              = '3em';
                    style['text-align']         = 'center';
                    style['font-size']          = '1.5em';
                    break;
                case 'bg':
                    var negativeColor = [255,0,0];
                    var positiveColor = [0,255,0];
                    var grey = [127,127,127];
                    var fromColor, toColor, finalColor;
                    if (sliderValue > 0) {
                        toColor = grey;
                        fromColor = positiveColor;
                    }
                    else {
                        toColor = grey;
                        fromColor = negativeColor;
                    }
                    var ratio = Math.abs(sliderValue) / 100;
                    finalColor = [
                        Math.ceil(fromColor[0]*ratio + toColor[0]*(1-ratio)).toString(16),
                        Math.ceil(fromColor[1]*ratio + toColor[1]*(1-ratio)).toString(16),
                        Math.ceil(fromColor[2]*ratio + toColor[2]*(1-ratio)).toString(16)
                    ];
                    finalColor = '#' + finalColor[0] + finalColor[1] + finalColor[2];
                    style['width']              = $scope.slider.width+'px';
                    style['height']             = $scope.slider.height+'px';
                    style['background']         = finalColor;
                    break;
            }
            return style;
        };

[darul75]

hi Nagey, it looks like a great PR and the first one for ng-slider, I will merge it when back home and give you a feedback. Great job, thx

[darul75]

hi, I have tried to merge it and fix some small issues, like giving noop() function in case styler function not set in options..

but in your first example, your were using reference to $scope.slider, how do you manage it ?

example:

var leftMargin = ($scope.slider.width / 2) - (handleRadius);`

thx

[nagey]

For that $scope.slider, I was buiding that based off of $window, and my particular layout. It's something that gets managed with my controller's onresize handler.

if you're curious, I set it up thusly:

var baseWidth;
        if ($window.innerWidth > 1200) {
            baseWidth = 1140;
        }
        else if ($window.innerWidth > 992) {
            baseWidth = 940;
        }
        else if ($window.innerWidth > 768) {
            baseWidth = 710;
        }
        else {
            baseWidth = $window.innerHTML - 45;
        }

        $scope.video.width = baseWidth * 2 / 3;
        $scope.video.height = $scope.video.width * 1/1.7777777777777777778;

        $scope.slider = {};

        $scope.slider.width = baseWidth / 3 - 20;
        $scope.slider.height =  baseWidth * 2 / 3 * 1/1.7777777777777777778;

Also committed a fix to make sure scope.options.styler is defined.

[nagey]

I didn't make this change, but you might want to consider changing line 112 of the Gruntfile.js to read as follows:

  grunt.registerTask('test-continuous', ['default', 'jshint', 'bower', 'karma:unit']);

That way you can be sure that your CI is running off of the most recent version of the code itself, not the most recent built version.

[darul75]

ok, thx for providing these details, I was then checking for vertical and 2 pointers slider, so it is taking time ;)

[nagey]

any update on this?

[darul75]

I started merge it and then quit because of another stuff on different project, really sorry I try to move back to it soon.