React RangeSelector - value

This property accepts one of the following:

• A two-item array

  Specifies the range's start and end. The array can contain a pair of numeric, string, or date-time values, depending on the scale's valueType. You can also set one of the array values to null to specify an open-ended range.

  jQuery

  index.js

  $(#rangeSelector).dxRangeSelector({
      value: [50, 70]
  })
  // Open-ended range
  $(#rangeSelector).dxRangeSelector({
      value: [null, 70]
  })

  Angular

  app.component.html

  <dx-range-selector [value]="[50, 70]" ></dx-range-selector>
  <!-- Open-ended range -->
  <dx-range-selector [value]="[null, 70]" ></dx-range-selector>

  Vue

  App.vue

  <DxRangeSelector>
      <DxRangeSelector :value="[50, 70]" />
  </DxRangeSelector>
  <!-- Open-ended range -->
  <DxRangeSelector>
      <DxRangeSelector :value="[null, 70]" />
  </DxRangeSelector>

  React

  App.tsx

  <RangeSelector>
      <RangeSelector value={[50, 70]} />
  </RangeSelector>
  <!-- Open-ended range -->
  <RangeSelector>
      <RangeSelector value={[null, 70]} />
  </RangeSelector>

• An object with the startValue and endValue fields

  An alternative to the two-item array.

  jQuery

  index.js

  $(#rangeSelector).dxRangeSelector({
      value: { startValue: 50, endValue: 70 }
  })
  // Open-ended range
  $(#rangeSelector).dxRangeSelector({
      value: { startValue: null, endValue: 70 }
  })

  Angular

  app.component.html

  <dx-range-selector [value]="{ startValue: 50, endValue: 70 }" ></dx-range-selector>
  <!-- Open-ended range -->
  <dx-range-selector [value]="{ startValue: null, endValue: 70 }" ></dx-range-selector>

  Vue

  The following code snippet demonstrates value defined as a <DxRangeSelector> attribute:

  App.vue

  <DxRangeSelector :value="{ startValue: null, endValue: 70 }" />
  <!-- Open-ended range -->
  <DxRangeSelector :value="{ startValue: null, endValue: 70 }" />

  The following code snippet demonstrates value defined as a <DxValue> selector:

  <DxRangeSelector>
      <DxValue startValue="50" endValue="70" />
  </DxRangeSelector>
  <!-- Open-ended range -->
  <DxRangeSelector>
      <DxValue :startValue="null" endValue="70" />
  </DxRangeSelector>

  React

  The following code snippet demonstrates value defined as a <RangeSelector> attribute:

  App.tsx

  <RangeSelector value={{ startValue: null, endValue: 70 }} />
  <!-- Open-ended range -->
  <RangeSelector value={{ startValue: null, endValue: 70 }} />

  The following code snippet demonstrates value defined as a <Value> selector:

  <RangeSelector>
      <Value startValue="50" endValue="70" />
  </RangeSelector>
  <!-- Open-ended range -->
  <RangeSelector>
      <Value startValue={null} endValue="70" />
  </RangeSelector>

• An object with the length and startValue or endValue

  Specifies the range using length and start or end values.

  jQuery

  index.js

  $(#rangeSelector).dxRangeSelector({
      value: { startValue: 50, length: 20 }
  })
  // or
  $(#rangeSelector).dxRangeSelector({
      value: { endValue: 70, length: 20 }
  })

  Angular

  app.component.html

  <dx-range-selector [value]="{ startValue: 50, length: 20 }" ></dx-range-selector>
  <!-- or -->
  <dx-range-selector [value]="{ endValue: 70, length: 20 }" ></dx-range-selector>

  Vue

  The following code snippet demonstrates value defined as an attribute of <DxRangeSelector>:

  App.vue

  <DxRangeSelector :value="{ startValue: 50, length: 20 }" />
  <!-- or -->
  <DxRangeSelector :value="{ endValue: 70, length: 20 }" />

  The following code snippet demonstrates value defined as a selector (<DxValue>):

  <DxRangeSelector>
      <DxValue startValue="50" length="20" />
  </DxRangeSelector>
  <!-- or -->
  <DxRangeSelector>
      <DxValue endValue="70" length="20" />
  </DxRangeSelector>

  React

  The following code snippet demonstrates value defined as an attribute of <RangeSelector>:

  App.tsx

  <RangeSelector value={{ startValue: 50, length: 20 }} />
  <!-- or -->
  <RangeSelector value={{ endValue: 70, length: 20 }} />

  The following code snippet demonstrates value defined as a selector (<Value>):

  <RangeSelector>
      <Value startValue="50" length="20" />
  </RangeSelector>
  <!-- or -->
  <RangeSelector>
      <Value endValue="70" length="20" />
  </RangeSelector>

  If you specify only length, the component defines the endValue property as the largest scale value.

See Also

• selectedRangeUpdateMode
• onValueChanged
• getValue() | setValue(value)

If the axis/scale displays numbers, set this property to a number:

length: 100 // a hundred axis/scale values

If the axis/scale displays date-time values, set it to an accepted string value or object that contains a field described further in this section:

length: 'day' // one day
length: { days: 2 } // two days