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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。