Skip to content

Instantly share code, notes, and snippets.

@Olshansk

Olshansk/Slider.html

Last active April 11, 2024 03:37
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Olshansk/6f0ec1663cdf01f44e83d5dcf0252ce3 to your computer and use it in GitHub Desktop.
Save Olshansk/6f0ec1663cdf01f44e83d5dcf0252ce3 to your computer and use it in GitHub Desktop.
Download ZIP
Google Sheets Slider Add-on
Raw
slider.gs
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu('My Addons')
.addItem('Add Slider', 'addSlider')
.addToUi();
}
function addSlider() {
var html = HtmlService.createHtmlOutputFromFile('Slider').setTitle('Value Sliders');
SpreadsheetApp.getUi().showSidebar(html);
}
function updateCellValue(v, row, column){
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var cell = sheet.getRange(row,column);
cell.setValue(v);
}
Raw
Slider.html
<!DOCTYPE html>
<html>
<head>
<script>
function sliderValue(value){
console.log("sliderValue", value)
google.script.run.updateCellValue(value, 1, 1);
}
</script>
</head>
<body>
<div class="sliders-container">
<div style="margin: 20px">
<div>
<span>Slider value (0 to 1 in 0.02 inc.)</span>
</div>
<input style="width: 100%" onchange="sliderValue(this.value)" oninput="sliderValue(this.value)" type="range" min="0" max="1", step="0.02" value="0.5" class="slider" id="targetValStake">
</div>
</div>
</body>
</html>
@Olshansk
Copy link
Author

Summary

tl;dr A shitty version of Google Colab's slider in Google Sheets.

I hacked this together for myself, but can productionize it if the requests ever come in. As you can see in the gif below, there is noticeable lag, but it gets the job done.

slider

Usage

  1. You will need to modify the cell-value based on your spreadsheet.
  2. You will need to copy-paste the HTML and function that gets triggered onchange and oninput for every extra slider you need.

Deployment

You'll need to create an Add-on:

Screen Shot 2022-07-17 at 1 58 30 PM

Add the files:

Screen Shot 2022-07-17 at 2 00 33 PM

And deploy it as a web app:

Screen Shot 2022-07-17 at 2 01 23 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment