[Draft] Added slider instead of drop down for referendum vote conviction

front-end/src/components/Post/GovernanceSideBar/Referenda/VoteReferendum.tsx

@@ -7,7 +7,7 @@ import { ApiPromiseContext } from '@substrate/context';
 import styled from '@xstyled/styled-components';
 import BN from 'bn.js';
 import React, { useContext, useMemo,useState } from 'react';
-import { DropdownProps, Select } from 'semantic-ui-react';
+import { DropdownProps } from 'semantic-ui-react';
 import { NotificationContext } from 'src/context/NotificationContext';
 import { LoadingStatusType,NotificationStatus } from 'src/types';
 import BalanceInput from 'src/ui-components/BalanceInput';
@@ -19,6 +19,7 @@ import Loader from 'src/ui-components/Loader';
 
 import AccountSelectionForm from '../../../../ui-components/AccountSelectionForm';
 import AyeNayButtons from '../../../../ui-components/AyeNayButtons';
+import Slider from '../../../../ui-components/Slider';
 
 interface Props {
 	className?: string
@@ -35,6 +36,7 @@ const VoteRefrendum = ({ className, referendumId, address, accounts, onAccountCh
 	const { api, isApiReady } = useContext(ApiPromiseContext);
 	const [loadingStatus, setLoadingStatus] = useState<LoadingStatusType>({ isLoading: false, message: '' });
 	const CONVICTIONS: [number, number][] = [1, 2, 4, 8, 16, 32].map((lock, index) => [index + 1, lock]);
+	const [sliderValue, setSliderValue] = useState(1);
 
 	const convictionOpts = useMemo(() => [
 		{ text: '0.1x voting balance, no lockup period', value: 0 },
@@ -45,8 +47,9 @@ const VoteRefrendum = ({ className, referendumId, address, accounts, onAccountCh
 	],[CONVICTIONS]);
 	const [conviction, setConviction] = useState<number>(convictionOpts[1].value);
 
-	const onConvictionChange = (event: React.SyntheticEvent<HTMLElement, Event>, data: DropdownProps) => {
-		setConviction(Number(data.value));
+	const onSliderChange = (value: number) => {
+		setSliderValue(value);
+		setConviction(Number(convictionOpts[value].value));
 	};
 
 	const onBalanceChange = (balance: BN) => setLockedBalance(balance);
@@ -109,12 +112,8 @@ const VoteRefrendum = ({ className, referendumId, address, accounts, onAccountCh
 					content='You can multiply your votes by locking your tokens for longer periods of time.'
 				/>
 			</label>
-			<Select
-				onChange={onConvictionChange}
-				options={convictionOpts}
-				pointing={'top'}
-				value={conviction}
-			/>
+			<Slider min={0} max={6} step={1} value={sliderValue} onChange={onSliderChange} />
+			<span className='text-muted'>{convictionOpts[sliderValue].text}</span>
 		</Form.Field>;
 
 	return (

front-end/src/ui-components/Slider.tsx

@@ -0,0 +1,86 @@
+// Copyright 2019-2020 @paritytech/polkassembly authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+import styled from '@xstyled/styled-components';
+import React from 'react';
+
+interface Props {
+	className?: string;
+	min: number;
+	max: number;
+	step: number;
+	value: number;
+	onChange: (value: number) => void
+}
+
+const Slider = ({ className, min, max, step, value, onChange }: Props) => {
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		onChange(parseInt(event.target.value) || min);
+	};
+
+	const steps = [];
+
+	for (let i = min; i <= max; i += step) {
+		steps.push(i);
+	}
+
+	return (
+		<div className={className}>
+			<input type="range" min={min} max={max} step={step} value={value} list="steplist" onChange={handleChange} />
+			<datalist id="steplist">
+				{steps.map(step => <option key={step}>{step}</option>)}
+			</datalist>
+		</div>
+	);
+};
+
+export default styled(Slider)`
+	width: 100%;
+
+	input[type=range] {
+		width: 100%;
+		margin: 7.5px 0;
+		background-color: transparent;
+		-webkit-appearance: none;
+	}
+	input[type=range]:focus {
+		outline: none;
+	}
+	input[type=range]::-webkit-slider-runnable-track {
+		background: #E5007A;
+		border: 0;
+		border-radius: 10px;
+		width: 100%;
+		height: 5px;
+		cursor: pointer;
+	}
+	input[type=range]::-webkit-slider-thumb {
+		margin-top: -7.5px;
+		width: 20px;
+		height: 20px;
+		background: #FFFFFF;
+		border: 3px solid #E5007A;
+		border-radius: 20px;
+		cursor: pointer;
+		-webkit-appearance: none;
+	}
+	input[type=range]:focus::-webkit-slider-runnable-track {
+		background: #E5007A;
+	}
+	input[type=range]::-moz-range-track {
+		background: #E5007A;
+		border: 0;
+		border-radius: 10px;
+		width: 100%;
+		height: 5px;
+		cursor: pointer;
+	}
+	input[type=range]::-moz-range-thumb {
+		width: 20px;
+		height: 20px;
+		background: #ffffff;
+		border: 3.px solid #E5007A;
+		border-radius: 20px;
+		cursor: pointer;
+	}
+`;