interval_slider.user.js

// ==UserScript==
// @name        Interval Slider
// @namespace   Violentmonkey Scripts
// @match       https://jpdb.io/settings
// @grant       GM_getValue
// @grant       GM_setValue
// @version     2.2
// @author      hmry
// @description 8/24/2022, 11:01:48 AM
// ==/UserScript==

const labels = {
  [ 15]: 'Shortest',
  [ 10]: 'Even shorter',
  [  5]: 'Shorter',
  [  0]: 'Normal',
  [ -5]: 'Longer',
  [-10]: 'Even longer',
  [-15]: 'Longest',
  // Uncomment for extra-long intervals (not recommended unless you are crazy)
  // [-20]: 'Longester',
  // [-25]: 'Even Longester',
  // [-30]: 'Longestest',
};

// Code starts here:

function deltaText(delta) {
  const rounded = Math.round(delta / 5) * 5,
        diff = delta-rounded,
        diffStr = (diff == 0) ? '' : (diff > 0) ? ` + ${diff}` : ` - ${-diff}`;

  return `${delta}:  <span class="strong">${labels[rounded]}${diffStr}${delta == 0 ? ' (default)' : ''}</span>`;
}

const firstCheckbox = document.querySelector('#retrievability-delta-15');
const delta = GM_getValue('lastSetting') ?? (firstCheckbox.form['retrievability-delta'].value || 0);

const HTML = `<div class="checkbox">
  <input style="flex-grow: 1; max-width: 32rem;" type="range" id="retrievability-delta" name="retrievability-delta" min="${Math.min(...Object.keys(labels))}" max="${Math.max(...Object.keys(labels))}" step="1" value="${delta}" />
  <div style="margin-left: 1rem">${deltaText(delta)}</div>
</div>`

firstCheckbox.parentElement.insertAdjacentHTML('beforebegin', HTML);

for (const checkbox of document.querySelectorAll('input[type=radio][name=retrievability-delta]'))
  checkbox.parentElement.parentElement.removeChild(checkbox.parentElement);

const slider = document.querySelector('#retrievability-delta');

slider.addEventListener('input', () => {
  slider.nextElementSibling.innerHTML = deltaText(slider.value);
});

document.querySelector('form[action="/settings"]').addEventListener('submit', () => {
  GM_setValue('lastSetting', slider.value);
});