awran5

1. Copy this code to your project CSS file

/* Start Switch field */
.switch-field .cmb2-radio-list li {
	padding-right: 0 !important;
	margin: 0;
}

.switch-field .cmb2-radio-list input {

awran5

This originally was based on slider field

I've changed its structure to avoid loading of heavy jquery UI so its only used the basic HTML5 type range input

1. php Filter

function cmb2_render_range( $field, $field_escaped_value, $field_object_id, $field_object_type, $field_type_object ){

  $slider = $field_type_object->input( array(
    'type'  => 'range',

awran5

[
    {
        "quote": "Be yourself; everyone else is already taken.",
        "author": "Oscar Wilde",
        "profession": "Irish poet",
        "topics": [
            "Inspirational",
            "Advice",
            "Humor"
        ]

awran5

// Some useful shorthanded JavaScript functions 

// select an element
const select = e => document.querySelector(e)
// Select multiple elements
const selectAll = e => document.querySelectorAll(e)

// Show DOM element
const show = e => (e.style.display = '')
// Hide DOM element

awran5

{
   "encryptedData": "your-key"
}

awran5

1. Install

npm i prismjs
npm i -D @types/prismjs

2. Import

import React, { useEffect } from 'react'
import Prism from 'prismjs'

awran5

import React, { useEffect, useRef } from 'react';

/**
 * Use setInterval with Hooks in a declarative way.
 *
 * @see https://stackoverflow.com/a/59274004/3723993
 * @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 */
export function useInterval(
  callback: React.EffectCallback,

awran5

function getRandomId() {
  return Array.from(window.crypto.getRandomValues(new Uint32Array(4)))
    .map((number) => number.toString(16))
    .join('-')
}