Slider not working correctly with values in a range between 0 and 1 (percentage)

[Laurin S]

Hi, I'm using the Slider with values in range between 0 and 1 (since I'm using percentages => format "p0"). Unfortunately, the following code is not working as expected, namely the colorRange is not working and also the predefined value does not get visualized correctly.

<SliderComponent

    id="progress"

    name="progress"

    value="0.5"

    min="0"

    max="1"    

    step="0.1"

    colorRange={[

        { start: 0, end: 0.33, color: "#DF2222" },

        { start: 0.34, end: 0.66, color: "#F3AD3C" },

        { start: 0.67, end: 1, color: "#00B300" },

    ]}

    showButtons={true}

    ticks={{

        placement: "After",

        format: "p0",

        largeStep: 0.2,

        smallStep: 0.1,

        showSmallTicks: true,

    }}

    tooltip={{ placement: "Before", isVisible: true, showOn: "Focus", format: "p0"}}

/>

Any suggestions?

[Laurin S]

Sorry, just another question about the Slider component:

What is the best way to show a label for the Slider, for example in a form?

For other components, for instance for the NumericTextBox, we have possibility to show a label using the "placeholder" and floatLabelType="Always" properties. Are there any similar solutions for the Slider component?

[Sowmiya Padmanaban]

Hi Laurin S,  

 

Greetings from Syncfusion support. 

 

Query1- colorRange is not working and also the predefined value does not get visualized correctly. 

 

We have prepared a sample based on your shared code snippet. Slider is rendered correctly and the initial value of Slider is set properly. 

 

Please, refer the below screenshot. 

 

 

 

Please, refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/forum/159554/ze/Slider-22162537.zip 

 

If the issue still persists, please replicate the issue in the attached sample. 

 

Query 2- Labels in Slider component. 

 

On your shared details, we suspect that you are mentioning the Slider ticks labels. Refer the below link for Slider ticks label. 

 

https://ej2.syncfusion.com/react/documentation/slider/how-to/customize-slider-ticks-label/ 

 

If we misunderstood your requirement, could you please share the video footage or screenshot of your requirement with Slider component. 

 

Please, refer to the below links for Slider component. 

 

UG Documentation- https://ej2.syncfusion.com/react/documentation/slider/getting-started/ 

 

Demo link- https://ej2.syncfusion.com/react/demos/#/material/slider/default 

 

API Reference- https://ej2.syncfusion.com/react/documentation/api/slider/ 

 

Please, let us know if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Laurin S]

It's still not working. But, I discovered the problem is somewhere else, namely, I'm using the Slider in a Grid Edit Dialog. The following (modified) code is showing, how I'm using the Slider (for test purposes, I removed all other components from the dialog). Unfortunately, it's still not working:

<GridComponent 

  [...]

  editSettings={{

    allowEditing: true,

    allowAdding: true,

    allowDeleting: true,

    mode: "Dialog",

    template: (args) => {

      return (

        <SliderComponent

          id="progress"

          name="progress"

          value={0.5}

          min={0}

          max={1}

          step={0.1}

          colorRange={[

            { start: 0, end: 0.33, color: "#DF2222" },

            { start: 0.33, end: 0.66, color: "#F3AD3C" },

            { start: 0.66, end: 1, color: "#00B300" },

          ]}

          showButtons={true}

          ticks={{

            placement: "After",

            format: "p0",

            largeStep: 0.2,

            smallStep: 0.1,

            showSmallTicks: true,

          }}

          tooltip={{ placement: "Before", isVisible: true, showOn: "Focus", format: "p0" }}

        />

      );

    },

    showDeleteConfirmDialog: true,

  }}

/>

[Manivel Sellamuthu]

Hi Laurin, 

Thanks for your update. 

We have checked the reported issue at our end and we are able to replicate the reported issue at our end. 

 

While validating the reported issue, we have found that the Slider control is not refreshed properly, since the Range slider is rendered dynamically. So we have refreshed the sldier in the created event. 

Please refer the below code example and sample for more information. 

 

import { render } from 'react-dom'; 

import './index.css'; 

import * as React from 'react'; 

import { GridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, Edit, Inject } from '@syncfusion/ej2-react-grids'; 

import { data } from './data'; 

import { SliderComponent } from '@syncfusion/ej2-react-inputs'; 

import { SampleBase } from './sample-base'; 

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs'; 

import { DatePickerComponent } from '@syncfusion/ej2-react-calendars'; 

export class DialogEdit extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.toolbarOptions = ['Add', 'Edit', 'Delete']; 

this.editSettings={ 

    allowEditing: true, 

    allowAdding: true, 

    allowDeleting: true, 

    mode: "Dialog", 

    template: (data) => { 

      return ( 

        <div> 

             . . . 

            <SliderComponent 

          id="progress" 

          name="progress" 

          value={0.5} 

          min={0} 

          max={1} 

          created={this.sliderCreated} 

          step={0.1} 

          colorRange={[ 

            { start: 0, end: 0.33, color: "#DF2222" }, 

            { start: 0.33, end: 0.66, color: "#F3AD3C" }, 

            { start: 0.66, end: 1, color: "#00B300" }, 

          ]} 

          showButtons={true} 

          ticks={{ 

            placement: "After", 

            format: "p0", 

            largeStep: 0.2, 

            smallStep: 0.1, 

            showSmallTicks: true, 

          }} 

          tooltip={{ placement: "Before", isVisible: true, showOn: "Focus", format: "p0" }} 

        /> 

        </div> 

      ); 

    }, 

    showDeleteConfirmDialog: true, 

  }; 

. . . 

    sliderCreated () { 

      this.refresh(); 

 } 

    render() { 

        return (<div className='control-pane'> 

        <div className='control-section'> 

          <GridComponent dataSource={data} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings}> 

. . . 

          </GridComponent> 

        </div> 

      </div>); 

    } 

} 

render(<DialogEdit />, document.getElementById('sample')); 

 

Sample: https://stackblitz.com/edit/react-n3blvz?file=index.js 

 

Please let us know, if you need further assistance. 

Regards, 

Manivel