Last active
September 25, 2017 22:00
-
-
Save kuitos/89e8aa538f0a507bd682 to your computer and use it in GitHub Desktop.
range slider base on angular-material slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Created by Kuitos on 2015/03/06 10:15 AM. | |
| Email: kuitos.lau@gmail.com | |
| author: EdwardCTaylor | |
| author: Kuitos | |
| Licence: MIT | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <link rel="stylesheet" href="/bower_components/angular-material/angular-material.min.css"/> | |
| <style> | |
| .range-slider-container { | |
| position: relative; | |
| height: 100px; | |
| } | |
| .range-slider-container md-slider { | |
| margin: 0; | |
| } | |
| .range-track-line { | |
| position: absolute; | |
| height: 2px; | |
| top: 23px; | |
| background-color: rgb(255, 64, 129); | |
| } | |
| .range-slider-container md-slider.md-default-theme.md-min .md-thumb:after { | |
| background-color: rgb(255, 64, 129) !important; | |
| } | |
| .range-slider-left, .range-slider-right { | |
| position: absolute; | |
| top: 0px; | |
| } | |
| .range-slider-right { | |
| right: 0px; | |
| } | |
| .range-slider-left md-slider .md-thumb-container { | |
| transition: -webkit-transform 0s linear; | |
| transition: transform 0s linear; | |
| } | |
| .range-slider-left md-slider.md-default-theme .md-track.md-track-fill { | |
| background-color: rgba(188, 188, 188, 1) !important; | |
| } | |
| .range-slider-left md-slider.md-default-theme .md-track:not(.md-track-fill) { | |
| background-color: rgb(255, 64, 129) !important; | |
| } | |
| .range-slider-container md-slider .md-thumb-container { | |
| transition: -webkit-transform 0s linear; | |
| transition: transform 0s linear; | |
| } | |
| .range-slider-container md-slider .md-track-container { | |
| transition: -webkit-transform 0s linear; | |
| transition: transform 0s linear; | |
| } | |
| </style> | |
| </head> | |
| <body ng-app="sliderDemo1"> | |
| <div ng-init="lower=1;upper=40;gap=1;"> | |
| <md-content class="md-padding"> | |
| <h3>range slider</h3> | |
| <range-slider min="1" max="40" step="1" lower-value="lower" upper-value="upper" gap="gap"></range-slider> | |
| <div> | |
| {{lower}} | |
| {{upper}} | |
| </div> | |
| </md-content> | |
| </div> | |
| <script src="/bower_components/angular/angular.min.js"></script> | |
| <script src="/bower_components/angular-animate/angular-animate.min.js"></script> | |
| <script src="/bower_components/angular-aria/angular-aria.min.js"></script> | |
| <script src="/bower_components/angular-material/angular-material.min.js"></script> | |
| <script type="text/ng-template" id="range-slider.tpl.html"> | |
| <div class='range-slider-container'> | |
| <div class='range-slider-left' ng-style="{width:lowerWidth+'%'}"> | |
| <md-slider ng-model="lowerValue" min='{{min}}' max='{{lowerMaxLimit}}' step="{{step}}" | |
| aria-label="lowerSlider"></md-slider> | |
| </div> | |
| <div class="range-track-line" | |
| ng-style="{width:tracker.width+'%',left:tracker.left+'%',right:tracker.right+'%'}"></div> | |
| <div class='range-slider-right' ng-style="{width:upperWidth+'%'}"> | |
| <md-slider ng-model="upperValue" min="{{upperMinLimit}}" max="{{max}}" step="{{step}}" | |
| aria-label="upperSlider"></md-slider> | |
| </div> | |
| </div> | |
| </script> | |
| <script> | |
| angular.module('sliderDemo1', ['ngMaterial', "directives.rangeSlider"]); | |
| angular.module('directives.rangeSlider', ['ngMaterial']) | |
| .directive('rangeSlider', function () { | |
| return { | |
| restrict : "E", | |
| scope : { | |
| max : '=', | |
| min : '=', | |
| gap : '=?', | |
| step : '=?', | |
| lowerValue: "=", | |
| upperValue: "=" | |
| }, | |
| templateUrl: 'range-slider.tpl.html', | |
| controller : ["$scope", function ($scope) { | |
| var COMFORTABLE_STEP = $scope.step, // whether the step is comfortable that depends on u | |
| tracker = $scope.tracker = { // track style | |
| width: 0, | |
| left : 0, | |
| right: 0 | |
| }; | |
| function updateSliders() { | |
| if ($scope.upperValue - $scope.lowerValue > $scope.gap) { | |
| $scope.lowerMaxLimit = $scope.lowerValue + COMFORTABLE_STEP; | |
| $scope.upperMinLimit = $scope.upperValue - COMFORTABLE_STEP; | |
| } else { | |
| $scope.lowerMaxLimit = $scope.lowerValue; | |
| $scope.upperMinLimit = $scope.upperValue; | |
| } | |
| updateSlidersStyle(); | |
| } | |
| function updateSlidersStyle() { | |
| // update sliders style | |
| $scope.lowerWidth = $scope.lowerMaxLimit / $scope.max * 100; | |
| $scope.upperWidth = ($scope.max - $scope.upperMinLimit) / $scope.max * 100; | |
| // update tracker line style | |
| tracker.width = 100 - $scope.lowerWidth - $scope.upperWidth; | |
| tracker.left = $scope.lowerWidth || 0; | |
| tracker.right = $scope.upperWidth || 0; | |
| } | |
| // watch lowerValue & upperValue to update sliders | |
| $scope.$watchGroup(["lowerValue", "upperValue"], function (newVal) { | |
| // filter the default initialization | |
| if (newVal !== undefined) { | |
| updateSliders(); | |
| } | |
| }); | |
| // init | |
| $scope.step = $scope.step || 1; | |
| $scope.gap = $scope.gap || 0; | |
| $scope.lowerMaxLimit = $scope.lowerValue + COMFORTABLE_STEP; | |
| $scope.upperMinLimit = $scope.upperValue - COMFORTABLE_STEP; | |
| updateSlidersStyle(); | |
| }] | |
| }; | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sorry but this not work as expected. When you start the slider the picker smooth motion.
Thanks it's working perfectly with angular material v1.0.6.
I recently found the need for this component and based on this gist I made bower module mdRangeSlider.
https://github.com/FDIM/md-range-slider
You'll have to copy stylesheet for it to work with angular material < v1.1 as they are 'privatizing' classes by adding _md prefix. I can create a branch if anyone needs that.
Thanks FDIM, I would like to use it with material 1.0.8. What do I need to do with the style sheet to get it to work?
The only difference is the prefixed classes. I've just created another branch that will work with v1.0.x
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, I'm very appreciate with your work of range-slider for AngularJS Material Design.
However, when I tried to use it in my own project, I found that every step's width is not same if the min value is not set to 0. It will be obvious if you set the min and value as 300 and 700, respectively.
I found that this segment of code is controlling the width of 2 md-sliders:
And I change it to
It will make sure every step has same width if the min value is not 0.