Slider is a cell drop-down in SpreadJS, which is defined as a style in the workbook which can be applied to cells. Javascript code can be used to define the marks, step, and direction of the slider. The spreadsheet below shows two different ways that the slider can be shown in the worksheet.

Drop-downs provide developers 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 now has 8 different kinds of drop-downs, and this demo shows how to use the Slider. You can use Slider drop-down like the following code : There are also some option items for customize the slider: scaleVisible: boolean : Specific 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 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 anyway, even if dragging or hovering, default value is false. width: number : Specific the slider's width when direction is horizontal, default value is 350. height: number : Specific 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 : Specific the display formatter, that used to tooltip or marks.
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function createSliderStyle(option) { let sliderStyle = new GC.Spread.Sheets.Style(); sliderStyle.cellButtons = [{ imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openSlider", useButtonStyle: true }]; sliderStyle.dropDowns = [{ type: GC.Spread.Sheets.DropDownType.slider, option: option }]; return sliderStyle } function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.setText(2, 7, "Horizontal Number Slider"); sheet.setStyle(3, 7, createSliderStyle({ marks: [0, 50, 100], step: 10, direction: GC.Spread.Sheets.LayoutDirection.horizontal, })); sheet.setText(2, 12, "Vertical Temperature Slider"); sheet.setStyle(3, 12, createSliderStyle({ max: 45, min: 32, marks: ["36"], step: 1, direction: GC.Spread.Sheets.LayoutDirection.vertical, formatString: "0°C" })); sheet.resumePaint(); spread.commandManager().execute({ cmd: "openSlider", row: 3, col: 7, sheetName: "Sheet1" }); // spread.commandManager().execute({cmd:"openSlider",row:3,col:12,sheetName:"Sheet1"}); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }