基于AngularJS实现的4个自定义滑块选择器组件

包含圆形、虚线框、实心填充框和圆。使用了Angular.js和hint.css开发库。

angular, 界面组件

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 4822
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var PageApp = angular.module('angularPageApp', ['ngSanitize']);

PageApp.controller('angularPageAppCtrl', function($scope) {});

PageApp.directive('inputRange', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            minval: '@',
            maxval: '@',
            stepval: '@',
            currentval: '@',
            classname: '@'
        },
        controller: function($scope) {
            $scope.defaults = {
                minval: 1,
                maxval: 100,
                stepval: 1,
                currentval: 2,
                classname: ''
            };
        },
        template: [
            '<div class="input-range {{ classname }}">',
            '<input type="range" min="{{ minval }}" max="{{ maxval }}" step="{{ stepval }}" value="{{ currentval }}" ',
            'ng-model="currentval"/>',
            '<div class="value-display">{{ currentval }}</div>',
            '</div>'
        ].join(''),
        link: function(scope, element, attrs) {
            angular.extend(scope, scope.defaults);
        }
    };
});

编译

CSS

*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #333;
}
.box {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    height: 80vh;
    margin: 5em;
}
.input-range {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    min-width: 11em;
    margin-bottom: 2em;
}
.input-range input[type="range"] {
    flex-grow: 1;
    line-height: 1;
    height: 2em;
    background-color: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.input-range input[type="range"]:focus {
    outline: none;
}
.input-range input[type="range"]::-moz-focus-inner {
    border: 0;
}
.input-range .value-display {
    color: white;
}
.input-range.minimal input[type="range"]::-webkit-slider-thumb {
    position: relative;
    width: 2em;
    height: 2em;
    cursor: pointer;
    background-color: #333;
    border: 0.2em solid white;
    border-radius: 50%;
    -webkit-appearance: none;
}
.input-range.minimal input[type="range"]::-moz-range-thumb {
    position: relative;
    width: 2em;
    height: 2em;
    cursor: pointer;
    background-color: #333;
    border: 0.2em solid white;
    border-radius: 50%;
    -webkit-appearance: none;
}
.input-range.minimal input[type="range"]::-ms-thumb {
    position: relative;
    width: 2em;
    height: 2em;
    cursor: pointer;
    background-color: #333;
    border: 0.2em solid white;
    border-radius: 50%;
    -webkit-appearance: none;
}
.input-range.minimal input[type="range"]::-webkit-slider-runnable-track {
    height: 1.1em;
    border-bottom: 0.2em solid white;
}
.input-range.minimal input[type="range"]::-moz-range-track {
    height: 1.1em;
    border-bottom: 0.2em solid white;
}
.input-range.minimal input[type="range"]::-ms-track {
    height: 1.1em;
    border-bottom: 0.2em solid white;
}
.input-range.minimal .value-display {
    padding-left: 0.5em;
    padding-top: 0.6em;
}
.input-range.minimal-classic input[type="range"]::-webkit-slider-thumb {
    width: 1em;
    height: 2em;
    margin-top: -0.6em;
    cursor: pointer;
    background-color: #333;
    border: 0.2em solid white;
    border-radius: 0.2em;
    -webkit-appearance: none;
}
.input-range.minimal-classic input[type="range"]::-moz-range-thumb {
    width: 1em;
    height: 2em;
    margin-top: -0.6em;
    cursor: pointer;
    background-color: #333;
    border: 0.2em solid white;
    border-radius: 0.2em;
    -webkit-appearance: none;
}
.input-range.minimal-classic input[type="range"]::-ms-thumb {
    width: 1em;
    height: 2em;
    margin-top: -0.6em;
    cursor: pointer;
    background-color: #333;
    border: 0.2em solid white;
    border-radius: 0.2em;
    -webkit-appearance: none;
}
.input-range.minimal-classic input[type="range"]::-webkit-slider-runnable-track {
    height: 1em;
    border: 0.2em solid grey;
    border-radius: 0.2em;
}
.input-range.minimal-classic input[type="range"]::-moz-range-track {
    height: 1em;
    border: 0.2em solid grey;
    border-radius: 0.2em;
}
.input-range.minimal-classic input[type="range"]::-ms-track {
    height: 1em;
    border: 0.2em solid grey;
    border-radius: 0.2em;
}
.input-range.minimal-classic .value-display {
    padding-left: 0.5em;
    padding-top: 0.3em;
}
.input-range.modern {
    box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.6), 0 0 0.3em rgba(255, 255, 255, 0.1);
    border-radius: 0.2em;
    background-color: #F64740;
    padding: 0.5em;
}
.input-range.modern input[type="range"] {
    margin: 0;
}
.input-range.modern input[type="range"]::-webkit-slider-thumb {
    width: 1.2em;
    height: 2em;
    margin-top: -0.6em;
    cursor: pointer;
    background-color: white;
    border-radius: 0.2em;
    -webkit-appearance: none;
    box-shadow: 0 0 0.5em black;
}
.input-range.modern input[type="range"]::-moz-range-thumb {
    width: 1.2em;
    height: 2em;
    margin-top: -0.6em;
    cursor: pointer;
    background-color: white;
    border-radius: 0.2em;
    -webkit-appearance: none;
    box-shadow: 0 0 0.5em black;
}
.input-range.modern input[type="range"]::-ms-thumb {
    width: 1.2em;
    height: 2em;
    margin-top: -0.6em;
    cursor: pointer;
    background-color: white;
    border-radius: 0.2em;
    -webkit-appearance: none;
    box-shadow: 0 0 0.5em black;
}
.input-range.modern input[type="range"]::-webkit-slider-runnable-track {
    height: 1em;
    border: 0.2em solid #F7F7FF;
    border-radius: 0.2em;
}
.input-range.modern input[type="range"]::-moz-range-track {
    height: 1em;
    border: 0.2em solid #F7F7FF;
    border-radius: 0.2em;
}
.input-range.modern input[type="range"]::-ms-track {
    height: 1em;
    border: 0.2em solid #F7F7FF;
    border-radius: 0.2em;
}
.input-range.modern .value-display {
    padding-left: 0.5em;
    padding-top: 0.2em;
}
.input-range.yolo {
    box-shadow: inset 0.1em 0 0.1em rgba(255, 255, 255, 0.4), inset -0.1em 0 0.1em rgba(255, 255, 255, 0.4), inset 0 0.1em 0.1em rgba(255, 255, 255, 0.4), inset 0 -0.1em 0.1em rgba(255, 255, 255, 0.4);
    border-radius: 2em;
    background-color: #944BBB;
    padding: 0.5em;
}
.input-range.yolo input[type="range"] {
    margin: 0;
}
.input-range.yolo input[type="range"]::-webkit-slider-thumb {
    width: 2em;
    height: 2em;
    margin-top: -0.5em;
    cursor: pointer;
    background-color: #531CB3;
    border-radius: 2em;
    -webkit-appearance: none;
    box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.7);
}
.input-range.yolo input[type="range"]::-moz-range-thumb {
    width: 2em;
    height: 2em;
    margin-top: -0.5em;
    cursor: pointer;
    background-color: #531CB3;
    border-radius: 2em;
    -webkit-appearance: none;
    box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.7);
}
.input-range.yolo input[type="range"]::-ms-thumb {
    width: 2em;
    height: 2em;
    margin-top: -0.5em;
    cursor: pointer;
    background-color: #531CB3;
    border-radius: 2em;
    -webkit-appearance: none;
    box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.7);
}
.input-range.yolo input[type="range"]::-webkit-slider-runnable-track {
    height: 1em;
    border-radius: 0.2em;
}
.input-range.yolo input[type="range"]::-moz-range-track {
    height: 1em;
    border-radius: 0.2em;
}
.input-range.yolo input[type="range"]::-ms-track {
    height: 1em;
    border-radius: 0.2em;
}
.input-range.yolo .value-display {
    padding-left: 0.5em;
    padding-top: 0.2em;
}

HTML

包含圆形、虚线框、实心填充框和圆。使用了Angular.js和hint.css开发库。

angular, 界面组件

编辑器支持Emmet

快捷键

包含圆形、虚线框、实心填充框和圆。使用了Angular.js和hint.css开发库。

angular, 界面组件

基于AngularJS实现的价格范围过滤器

使用Angular.js实现自定义的Addthis社交分享插件界面和指令

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：