How to set time in rang slider in angular js?

问题

I am using Slider with draggable range(https://jsfiddle.net/ValentinH/954eve2L/) in angular js for the time selection. I want to set time in this slider. So my clock is from 00.00 to 24.00. But I want to set time with 10 minutes interval, Like 00.10, 00.20, 00.30, 00.40, 00.50, 01.00, 01.10,01.10

<article>
  <h2>Slider with draggable range</h2>

  <rzslider rz-slider-model="slider_draggable_range.minValue" rz-slider-high="slider_draggable_range.maxValue" rz-slider-options="slider_draggable_range.options"></rzslider>
</article>

---

// Slider with draggable range
$scope.slider_draggable_range = {
  minValue: 1,
  maxValue: 8,
  options: {
    ceil: 10,
    floor: 0,
    draggableRange: true
  }
};

---

$scope.slider_draggable_range = {
  minValue: $scope.fromTime,
  maxValue: $scope.toTime,
  options: {
    ceil: 24,
    floor: 0,
    draggableRange: true,
    showTicks: true,
    hideLimitLabels: true,
    hourBase: function(value) {
      return (((value > 1 && value < 12) || value > 25) ? '0' : '') + (value + 22) % 24 + '00 hrs'
    },
    steps: pules()
  }
};

I can't post my full code. Because it is not possible. I am selecting time by hour basis like 10.00,11.00,12.00......But right now I want to time from like 1.10, 1.20,1.30.

When I used statically minValue: 4.40 then it will point 4 and when I set 4.60 then it will point to 5, So its convert into round figure value. Not in Points.

$scope.slider_draggable_range = {
  minValue: 4.40,
  maxValue: 7,
  options: {
    ceil: 24,
    floor: 0,
    draggableRange: true
  }
};

ceil:24 limit,
floor: starting point, minvalue:plote starting point for
rang, maxvalue:plote ending point for rang

Please share your idea. This question is very important for me and your answer valuable.

回答1:

If I understand you correctly, The thing you want, can achieved using the stepsArray option.

The idea is to use the option to set the options by yourself. Thats way you can set it to non integer numbers.

(Search for the demo Slider with Alphabet in http://angular-slider.github.io/angularjs-slider/)

Like this (Not the case, just an example):

var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  var arr = getRange().map(n => {
    return {
      value: n,
      legend: n
    };
  });
  
  $scope.slider = {
    minValue: '10.50',
    maxValue: '14.20',
    options: {
      showTicks: true,
      stepsArray: arr
    }
  };
});

function getRange() {
  var arr = [];
  var d = new Date(2017, 1, 1);
  for (var i = 0; i < (6 * 24); i++) {
    d.setMinutes(d.getMinutes() + 10);
    arr.push(leadZero(d.getHours()) + '.' + leadZero(d.getMinutes()));
  }
  return arr;
}

function leadZero(time) {
  return time < 10 ? '0' + time : time;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #1f2636;
  font-size: 14px;
  padding-bottom: 40px;
}

header {
  background: #0db9f0;
  color: #fff;
  margin: -40px;
  margin-bottom: 40px;
  text-align: center;
  padding: 40px 0;
}

h1 {
  font-weight: 300;
}

h2 {
  margin-bottom: 10px;
}

.wrapper {
  background: #fff;
  padding: 40px;
}

article {
  margin-bottom: 10px;
}

.tab-pane {
  padding-top: 10px;
}

.field-title {
  width: 100px;
}

.vertical-sliders {
  margin: 0;
}

.vertical-sliders>div {
  height: 250px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="rzSliderDemo">
  <div ng-controller="MainCtrl" class="wrapper">
    <header>
      <h1>AngularJS Touch Slider</h1>

    </header>
    <article>
      <h2>Simple slider</h2>
      Model:
      <input type="text" ng-model="slider.minValue" />
      <input type="text" ng-model="slider.maxValue" />
      <br/>
      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
    </article>
  </div>
</div>

来源：https://stackoverflow.com/questions/43803661/how-to-set-time-in-rang-slider-in-angular-js