Angular-awesome-slider

AngularJS slider control directive

Welcome

Just play a little bit

Single value

Current value is: {{value}}

Code

<!DOCTYPE html>
<html>
<head>
  ...
  <link href="css/ng-slider.min.css" rel="stylesheet" />
  <script type="javascripts/javascript" src="angular.min.js" />
  <script type="javascripts/javascript" src="ng-slider.min.js" />
</head>
<body>
  ...
  <div>
    <input ng-model="value"  type="text" id="mySlider1" slider options="options" />
  </div>
  
  <script>
    function ctrl($scope) {
      $scope.value = "50";
      $scope.options = {       
        from: 1,
        to: 100,
        step: 1,
        dimension: " km",
        css: {
          background: {"background-color": "silver"},
          before: {"background-color": "purple"},
          default: {"background-color": "white"},
          after: {"background-color": "green"},
          pointer: {"background-color": "red"}          
        }        
      };
    }   
  </script>
      
</body>
</html>

Single value with scale

Current value is: {{value2}}

Code

function ctrl($scope) {
  $scope.value = "50";
  $scope.options = {       
    from: 1,
    to: 100,
    step: 1,
    dimension: " km",
    scale: [0, '|', 50, '|' , 100]        
  };
}

Double value

Current value is: {{value3}}

Code

function ctrl($scope) {
  $scope.value = "10;15";
  $scope.options = {       
    from: 0,
    to: 40,
    step: 1,
    dimension: " $"       
  };
}

Double value with scale

Current value is: {{value4}}

Code

function ctrl($scope) {
  $scope.value = "10;15";
  $scope.options = {       
    from: 0,
    to: 40,
    step: 1,
    dimension: " $",
    scale: [0, '|', 10, '|', 20, '|' , 30, '|', 40]       
  };
}

Vertical double value with scale

Current value is: {{valueV1}}

Code

function ctrl($scope) {
  $scope.value = "10;15";
  $scope.options = {       
    from: 0,
    to: 40,
    step: 1,
    dimension: " $",
    scale: [0, '|', 10, '|', 20, '|' , 30, '|', 40],
    vertical: true       
  };
}