Slider

Drop-downs provide a developer the ability to add a drop-down menu with specific properties to cells in a workbook. These drop-down menus don't require any extra code other than simply specifying which one to use for the drop-down menu.

SpreadJS has 9 different kinds of drop-downs, and this demo shows how to use the Slider drop-down.

You can use Slider drop-down with the following code :

    // The way of click the dropdown icon to open Slider. 
   var horizontalSliderStyle = new GC.Spread.Sheets.Style();
       horizontalSliderStyle.cellButtons = [
           {
               imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
               command: "openSlider",
               useButtonStyle: true,
           }
       ];
       horizontalSliderStyle.dropDowns = [
           {
               type: GC.Spread.Sheets.DropDownType.slider,
               option: {
                   marks: [0,50,100],
                   step: 10,
                   direction: GC.Spread.Sheets.LayoutDirection.horizontal,
               }
           }
       ];
       sheet.setText(2, 7, "Horizontal Number Slider");
       sheet.setStyle(3, 7, horizontalSliderStyle);

       // The way just open Slider with command rather then clicking the dropdown button.
       spread.commandManager().execute({cmd:"openSlider",row:3,col:7,sheetName:"Sheet1"});

There are also some option items for customizing the slider:

• scaleVisible: boolean : Specify whether the thumb can drag over tick only, default value is false.
• max: number : The maximum value the slider can slide to, default value is 100.
• min: number : The minimum value the slider can slide to, default value is 0.
• step: number : The granularity that the slider can step through values. Must greater than 0, and be divided by (max - min) . When marks no null, step can be null, default value is 1.
• tooltipVisible: boolean : If true, tooltip will show always, or it will not show, even if dragging or hovering, default value is false.
• width: number : Specify the slider's width when direction is horizontal, default value is 350.
• height: number : Specify the slider's height when direction is vertical, default value is 350.
• direction: "horizontal" | "vertical" : Specific the direction of slider, default value is horizontal.
• marks: number[] : Tick mark of Slider, type has value and label.
• formatString: string : Specify the display formatter, that used to tooltip or marks.
• showNumberRange: boolean : Specify whether the slider show as select number range mode, default value is false.