Demos
Features
Cells
Cell Drop-downs
Slider

Slider

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 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 : 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.
import * as React from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; import { AppFunc } from './app-func'; // import { App } from './app-class'; // 1. Functional Component sample createRoot(document.getElementById('app')).render(<AppFunc />); // 2. Class Component sample // createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets } from '@mescius/spread-sheets-react'; export function AppFunc() { const 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 } const initSpread = (spread) => { let 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.setText(14, 7, "Horizontal Number Range Slider"); sheet.setText(16, 6, "Start Number:"); sheet.setFormula(16, 7, '=IF(ISBLANK(H16), "", H16.start'); sheet.setText(17, 6, "End Number:"); sheet.setFormula(17, 7, '=IF(ISBLANK(H16), "", H16.end'); sheet.setColumnWidth(6, 150); let rangeSliderStyle1 = createSliderStyle({ marks: [0, 50, 100], step: 10, direction: GC.Spread.Sheets.LayoutDirection.horizontal, showNumberRange: true }); rangeSliderStyle1.formatter = '=IF(ISBLANK(@), "", @.start&"~"&@.end)'; sheet.setStyle(15, 7, rangeSliderStyle1); sheet.setText(14, 12, "Vertical Number Range Slider"); sheet.setText(16, 11, "Start Number:"); sheet.setFormula(16, 12, '=IF(ISBLANK(M16), "", M16.start'); sheet.setText(17, 11, "End Number:"); sheet.setFormula(17, 12, '=IF(ISBLANK(M16), "", M16.end'); sheet.setColumnWidth(11, 150); let rangeSliderStyle2 = createSliderStyle({ marks: [0, 50, 100], step: 1, direction: GC.Spread.Sheets.LayoutDirection.vertical, showNumberRange: true }); rangeSliderStyle2.formatter = '=IF(ISBLANK(@), "", @.start&"~"&@.end)'; sheet.setStyle(15, 12, rangeSliderStyle2); sheet.resumePaint(); spread.commandManager().execute({ cmd: "openSlider", row: 3, col: 7, sheetName: "Sheet1" }); } return (<div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={initSpread}> </SpreadSheets> </div> </div>); }
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets } from '@mescius/spread-sheets-react'; const Component = React.Component; export class App extends Component { constructor(props) { super(props); this.spread = null; this.autoGenerateColumns = false; } render() { return (<div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> </SpreadSheets> </div> </div>); } 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 } initSpread(spread) { let sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.setText(2, 7, "Horizontal Number Slider"); sheet.setStyle(3, 7, this.createSliderStyle({ marks: [0, 50, 100], step: 10, direction: GC.Spread.Sheets.LayoutDirection.horizontal })); sheet.setText(2, 12, "Vertical Temperature Slider"); sheet.setStyle(3, 12, this.createSliderStyle({ max: 45, min: 32, marks: ["36"], step: 1, direction: GC.Spread.Sheets.LayoutDirection.vertical, formatString: "0°C" })); sheet.setText(14, 7, "Horizontal Number Range Slider"); sheet.setText(16, 6, "Start Number:"); sheet.setFormula(16, 7, '=IF(ISBLANK(H16), "", H16.start'); sheet.setText(17, 6, "End Number:"); sheet.setFormula(17, 7, '=IF(ISBLANK(H16), "", H16.end'); sheet.setColumnWidth(6,150); let rangeSliderStyle1 = this.createSliderStyle({ marks: [0, 50, 100], step: 10, direction: GC.Spread.Sheets.LayoutDirection.horizontal, showNumberRange: true }); rangeSliderStyle1.formatter = '=IF(ISBLANK(@), "", @.start&"~"&@.end)'; sheet.setStyle(15, 7, rangeSliderStyle1); sheet.setText(14, 12, "Vertical Number Range Slider"); sheet.setText(16, 11, "Start Number:"); sheet.setFormula(16, 12, '=IF(ISBLANK(M16), "", M16.start'); sheet.setText(17, 11, "End Number:"); sheet.setFormula(17, 12, '=IF(ISBLANK(M16), "", M16.end'); sheet.setColumnWidth(11,150); let rangeSliderStyle2 = this.createSliderStyle({ marks: [0, 50, 100], step: 1, direction: GC.Spread.Sheets.LayoutDirection.vertical, showNumberRange: true }); rangeSliderStyle2.formatter = '=IF(ISBLANK(@), "", @.start&"~"&@.end)'; sheet.setStyle(15, 12, rangeSliderStyle2); sheet.resumePaint(); spread.commandManager().execute({ cmd: "openSlider", row: 3, col: 7, 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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/en/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/cjs/react.production.js', 'react-dom': 'npm:react-dom/cjs/react-dom.production.js', 'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js', 'scheduler': 'npm:scheduler/cjs/scheduler.production.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);