chrisgannon

SVG Bubble Slider

A dynamic menu I've built that can be used with either icons or text for the slider bubbles.

This one is a fun emoticon rating slider - you can drag and throw or just click to show how you feel.

A Pen by Chris Gannon on CodePen.

License.

chrisgannon

function init() {
    var myWheel = new Spin2WinWheel();
    var myBtn = document.querySelector('.spinBtn');
    //trigger with button
    myWheel.init({data:wheelDataObject, spinTrigger: myBtn});

    //triggered with a gesture
    //myWheel.init({data:wheelDataObject});

}

chrisgannon

{
"colorArray":[ "#364C62","#364C62","#364C62","#364C62","#364C62","#364C62","#364C62","#ED506A"],

"segmentValuesArray" : [
  {"probability":0, "type": "string", "value": "", "win": false, "resultText": "5% OFF", "userData": {"score":1000000}},
  {"probability":0, "type": "string", "value": "", "win": false, "resultText": "10% OFF", "userData": {"score":0}},
  {"probability":0, "type": "string", "value": "", "win": false, "resultText": "5% OFF", "userData": {"score":0}},
  {"probability":100, "type": "string", "value": "10% OFF", "win": false, "resultText": "10% OFF", "userData": {"score":40}},
  {"probability":0, "type": "string", "value": "", "win": false, "resultText": "5% OFF", "userData": {"score":0}},
  {"probability":0, "type": "string", "value": "", "win": false, "resultText": "15% OFF", "userData": {"score":0}},

chrisgannon

This post links my 3Box profile to my Github account! Web3 social profiles by 3Box.
    
  ✅ did:3:bafyreieqj3ywax2xt6jjhv33vpjjz6obtr2mkf5yehkxlqchqpxdstshfe ✅
    
    Create your profile today to start building social connection and trust online at https://3Box.io/

chrisgannon

Release notes for updates can be found in the comments

FAQs can be found here here

Documentation for Spin2Win Wheel by Chris Gannon

Built using Scalable Vector Graphics Spin2Win Wheel is a responsive, flexible, customisable, resolution independent spin wheel game whose outcomes you control.

Spin results, prizes, win/lose, number of spins, custom data and more can be controlled using JSON data. You can set the winning probabilty for each segment and customise the look and feel of Spin2Win Wheel to bring it in line with your brand or color scheme - it even has an anti-cheat mechanism to prevent players placing the wheel on a chosen segment.

You can purchase Spin2Win Wheel by Chris Gannon from CodeCanyon here