javascript - 如何在 RZslider 中绘制减小尺寸的 showticks 在线线条？

Question

我正在使用带有 showTicks 的 RZslider。我想减小 showTicks 的大小。并且请在全屏下展开下面的输出，然后您将能够在 slider 上看到显示标记。我想减少这些 showticks 的大小。

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

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  $scope.$watch('dateBirth', function(n, o) {
    var newDay = n || new Date();
    $scope.selectedDate = moment(newDay);
    $scope.selectedDate.hour(moment().hour());
    $scope.selectedDate.minute(0);
    $scope.init();
  });
  
  $scope.init = function() {
    var startDate, endDate, startTime, endTime;
    
    var timeData = getRange($scope.selectedDate);
    $scope.localTime = timeData.currentTime; // actually start of this hour
    
    var arr = timeData.times.map(n => {
      return {
        value: n.value
        //legend: n.value
      };
    });
    
    $timeout(function(){
      $scope.slider = {
        minValue: $scope.localTime.clone().subtract(4, "hours").format('YYYY DD MMM HH:mm'),
        maxValue: $scope.localTime.clone().add(4, "hours").format('YYYY DD MMM HH:mm'),
        options: {
          showTicks: true,
          stepsArray: arr,
          draggableRange: true,
        }
      };
    });
  }
  
  $scope.init();
});

function getRange(currentDate) {
  var arr = [];
  var totalHourRange = 32;
  var currentTime = currentDate || moment(); // current date and time using Moment
  
  // set current time to beginning of the hour
  currentTime.minute(0);
  
  // clone date and substract 1/2 total range to get start point
var tmpTime = currentTime.clone();
     //tmpTime.subtract(totalHourRange / 2, 'hours');
     tmpTime.hour(0).subtract(4, 'hours');
  
  // offset is the number of minutes from the current point
  for (var i = -6 * (totalHourRange / 2); i <= 6 * (totalHourRange / 2); i++) {
      arr.push({value: tmpTime.format('YYYY DD MMM HH:mm'), offset: i * 10});
      tmpTime.add(10, 'minutes');
    }
  return { times: arr, currentTime: currentTime, totalHourRange: totalHourRange };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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.2.23/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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div ng-app="rzSliderDemo">
  <div ng-controller="MainCtrl" class="wrapper">
    <header>
      <h2>AngularJS Touch Slider</h2>
    </header>
    <article>
   
      
      <br />
      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
    </article>
  </div>
</div>

当我减小 showticks 的大小时，它就不能正确地在线上绘制。

CSS

  .rzslider .rz-tick {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    margin-left: 11px;
    text-align: center;
    cursor: pointer;
    background: #d8e0f3;
    border-radius: 50%;
}

输出

我想在每个 showticks 之间留出空间。如何在线上清楚地绘制显示标记。

Answer 1

我认为您可以使用属性 showTicks 指定所需的 ticks 数。例如，如果你只想显示 10 个刻度，你需要给 showTicks:10，引用下面的例子。

另请查看 AngularJS Slider Demo Page 中的示例演示，我们可以看到 showticks:10 属性的实现。

注意:由于有很多数据点，我们可以看到 slider 没有固定的步长，减少数据点的数量将在 slider 中创建步长。

如果此代码对您有帮助，请告诉我!

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

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  $scope.$watch('dateBirth', function(n, o) {
    var newDay = n || new Date();
    $scope.selectedDate = moment(newDay);
    $scope.selectedDate.hour(moment().hour());
    $scope.selectedDate.minute(0);
    $scope.init();
  });
  
  $scope.init = function() {
    var startDate, endDate, startTime, endTime;
    
    var timeData = getRange($scope.selectedDate);
    $scope.localTime = timeData.currentTime; // actually start of this hour
    
    var arr = timeData.times.map(n => {
      return {
        value: n.value
        //legend: n.value
      };
    });
    
    $timeout(function(){
      $scope.slider = {
        minValue: $scope.localTime.clone().subtract(4, "hours").format('YYYY DD MMM HH:mm'),
        maxValue: $scope.localTime.clone().add(4, "hours").format('YYYY DD MMM HH:mm'),
        options: {
          showTicks: 10,
          stepsArray: arr,
          draggableRange: true,
        }
      };
    });
  }
  
  $scope.init();
});

function getRange(currentDate) {
  var arr = [];
  var totalHourRange = 32;
  var currentTime = currentDate || moment(); // current date and time using Moment
  
  // set current time to beginning of the hour
  currentTime.minute(0);
  
  // clone date and substract 1/2 total range to get start point
var tmpTime = currentTime.clone();
     //tmpTime.subtract(totalHourRange / 2, 'hours');
     tmpTime.hour(0).subtract(4, 'hours');
  
  // offset is the number of minutes from the current point
  for (var i = -6 * (totalHourRange / 2); i <= 6 * (totalHourRange / 2); i++) {
      arr.push({value: tmpTime.format('YYYY DD MMM HH:mm'), offset: i * 10});
      tmpTime.add(10, 'minutes');
    }
  return { times: arr, currentTime: currentTime, totalHourRange: totalHourRange };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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.2.23/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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div ng-app="rzSliderDemo">
  <div ng-controller="MainCtrl" class="wrapper">
    <header>
      <h2>AngularJS Touch Slider</h2>
    </header>
    <article>
   
      
      <br />
      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
    </article>
  </div>
</div>