JavaScript ArcGIS Slider.tickConfigs用法及代码示例

基本信息

以下是所在类或对象的基本信息。

AMD: require(["esri/widgets/Slider"], (Slider) => { /* code goes here */ });

ESM: import Slider from "@arcgis/core/widgets/Slider";

类： esri/widgets/Slider

继承: Slider > Widget > Accessor

自从：用于 JavaScript 4.12 的 ArcGIS API

用法说明

Slider.tickConfigs函数(或属性)的定义如下：

tickConfigs TickConfig[]

设置后，沿滑块轨道呈现刻度。有关如何配置刻度位置、样式和行为的更多信息，请参阅TickConfig 文档。

例子：

// places 25 ticks on the slider track
// evenly spaced from one another
slider.tickConfigs = [{
  mode: "count",
  values: 25
}];

// places ticks spanning the width of
// the slider at 20% intervals from one another
// this is the equivalent of setting mode to 'count'
// and the values to 5.
slider.tickConfigs = [{
  mode: "percent",
  values: 20
}];

// Places three ticks on the slider: one positioned
// 10% of the width from the start (or min value), another
// directly in the middle (50% from the start), and
// another 90% of the width from the start of the slider.
// Because the values are %s the values are always relative
// regardless of the range of the slider values.
slider.tickConfigs = [{
  mode: "percent",
  values: [ 10, 50, 90 ]
}];

// Places 5 ticks on the slider at the slider values
// provided below. These are absolute positions.
slider.tickConfigs = [{
  mode: "position",
  values: [ 0, 5, 10, 15, 20 ]
}];

// Places a single tick at the location of the value of 5.
slider.tickConfigs = [{
  mode: "position",
  values: 5
}];

// Renders three groups of ticks. The first is a basic set
// of 25 ticks. The second places 4 ticks and adds custom
// CSS classes to modify their styling. The third adds
// a click event handler to the tick labels.
slider.tickConfigs = [{
  mode: "count",
  values: 25
}, {
  mode: "percent",
  values: [12.5, 37.5, 62.5, 87.5],
  labelsVisible: true,
  tickCreatedFunction: function(initialValue, tickElement, labelElement) {
    tickElement.classList.add("mediumTicks");
    labelElement.classList.add("mediumLabels");
  }
}, {
  mode: "count",
  values: 5,
  labelsVisible: true,
  tickCreatedFunction: function(initialValue, tickElement, labelElement) {
    tickElement.classList.add("largeTicks");
    labelElement.classList.add("largeLabels");
    labelElement.onclick = function() {
      const newValue = labelElement["data-value"];
      slider.values = [ newValue ];
    };
  }
}];

相关用法

注：本文由纯净天空筛选整理自arcgis.com大神的英文原创作品 Slider.tickConfigs。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。