如何在 RZslider 中绘制缩小的 showticks 在线线栏？

Question

我正在使用带有 showTicks 的 RZslider。我想减小 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%;
}

输出

我想在每个表演片段之间留出空间。怎样才能在网上画的很清楚。

Answer 1

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

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

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

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

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>