Implementation:Sail sg LongSpec Bulma Slider

Knowledge Sources	Sail_sg_LongSpec
Domains	Frontend, Website
Last Updated	2026-02-14 05:00 GMT

Overview

Vendor JavaScript library providing range slider UI components for the project website, built on Bulma CSS framework.

Description

The bulma-slider.js file is a third-party webpack-bundled JavaScript library that provides enhanced range input/slider controls for the LongSpec project website. It is a UMD module exported as bulmaSlider and includes custom styling, event handling, and value display features compatible with Bulma CSS. This is vendor code, not authored by the LongSpec team.

Usage

This file is loaded by the project website HTML pages to render interactive sliders for parameter visualization or result comparison. It is not part of the training or inference pipeline.

Code Reference

Source Location

• Repository: Sail_sg_LongSpec
• File: static/js/bulma-slider.js
• Lines: 1-461

Signature

// UMD module: bulmaSlider
(function webpackUniversalModuleDefinition(root, factory) {
    // exports as CommonJS, AMD, or global
    root["bulmaSlider"] = factory();
})

Import

<script src="static/js/bulma-slider.js"></script>

I/O Contract

Inputs

Name	Type	Required	Description
DOM elements	HTML	Yes	Range input elements with Bulma CSS classes

Outputs

Name	Type	Description
Slider UI	DOM	Enhanced range slider with value display and styling

Usage Examples

<!-- Include in HTML page -->
<link rel="stylesheet" href="static/css/bulma.css">
<script src="static/js/bulma-slider.js"></script>

<input class="slider" type="range" min="0" max="100" value="50">

<script>
bulmaSlider.attach();
</script>