Last active
April 11, 2024 03:37
-
-
Save Olshansk/6f0ec1663cdf01f44e83d5dcf0252ce3 to your computer and use it in GitHub Desktop.
Google Sheets Slider Add-on
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Usage
onchange
andoninput
for every extra slider you need.Deployment
You'll need to create an
Add-on
:Add the files:
And deploy it as a web app: